Pegando o valor do input

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...