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

Comentários

Leonardo Loures | 06/03/2016 12:18:47

Gostaria de no lugar da função alert(valor), chamar um método de controle servlet como por exemplo: Controle?cmd=buscar e neste método há um request.getParameter("entrada");

Josean Matias:

Olá Leornardo, isso que deseja seria possível utilizando AJAX.

Gustavo Morello | 05/08/2015 15:16:35

Muito bom o Tutorial, gostei muito, mas tenho outra dúvida.

Meu campo input receberá um valor texto e preciso fazer uma verificação letra por letro do texto digitado. Cada letra terá uma ação. Eu não estou conseguindo fazer essa verificação letra por letra. Se possível me ajudar aguardo retorno.

Parabéns pelos tutoriais. Simples e Direto!

Josean Matias:

Olá Gustavo,

Você conseguirá capturar letra por letra utilizando o evento "onkeydown". E para percorrer uma string completa poderá utilizar um loop com a função charAt para capturar letra.

for (int i=0; i< minha_string.length(); i++) {  
       char c = minha_string.charAt(i);  
    }

André | 30/03/2014 18:50:50

como eu faco para receber o valor dessa funcao, pesquisa(edtCodigo.value)
em uma variavel php
$resultado = (?)

 

w | 03/01/2013 14:47:34

Como pegar o valor em javascript e depois postar em outra página ?

sergio | 11/02/2012 10:56:02
tenho uma sequencia de albuns de fotos hospedados:
www.meusite.com.br/albuns/casas/kv200/slide.hmal
www.meusite.com.br/albuns/casas/kv201/slide.hmal
www.meusite.com.br/albuns/casas/kv202/slide.hmal, etc
como criar um campo onde o visitante digita o codigo do album, por exemplo, kv201 e clicando em um botão ao lado do campo abre o link correspondente?
Josean Matias:

Olá Sergio, a resposta para sua dúvida seria um conteúdo para um novo post, pois demanda muitos detalhes. Quem sabe quando estiver com tempo livre explicarei com um post. Mas tenta pegar o valor do input e concatenar no endereço do álbum (isso considerando que o código do album seja parte da url).

Antonio Carlos | 07/02/2012 10:47:41
Bom dia.

Como "pegar" essa variavel para fazer um select ?
Josean Matias:

O melhor nesse caso seria fazer um select via Ajax. Existem artigos na web que explicam esse procedimento. Boa sorte!

Comentar