Pegando o valor do input
Categoria: jQuery 01 de dezembro de 2010
Em muitas situações precisamos pegar o valor de um campo input, seja para fazer algum cálculo matemático ou mesmo para transferir o conteúdo do input para outro local.
Neste artigo mostro como fazer isso utilizando jQuery.
Para este tutorial será necessário a chamada da biblioteca jQuery no cabeçalho da página, se ainda não está familiarizado, veja o artigo jQuery - O básico dos básicos.
Primeiramente o formulário HTML que vamos utilizar para este exemplo:
<form action="" method="post">
<input type="text" name="entrada" value="" />
</form>
<p><a id="pegar-valor" href="#">Pegar valor</a></p>
Dêem atenção especial para o nome do input que está no formulário e para o ID do link logo abaixo do formulário. Pois eles serão utilizados pelo nosso código jQuery.
<script type="text/javascript">
$(document).ready(function(){
//evento quando clicar no link com id="pegar-valor"
$("#pegar-valor").click(function(){
//pegamos o valor do input
var valor = $("input[name=entrada]").val();
//mostramos o valor com alert()
alert(valor);
});
});
</script>
Os comentários no código explicam bem o que está acontecendo em cada parte.
Ao clicar no link com id=”pegar-valor”, pegamos o valor do input e mostramos na tela com o alert(). Notem que neste momento poderíamos transferir o valor para outro input.
Imaginem que quiséssemos calcular a média de alguma coisa: pegaríamos o valor do input 1 e do input 2; e após o cálculo de média, mostraríamos o resultado no input 3.
Veremos esse cálculo de média mais adiante...
