JavaScript

Como pegar valor de input com JavaScript

15 de dezembro de 2020

Como pegar valor de input com JavaScript

Neste artigo você vai aprender a como pegar valor de input com JavaScript, ou seja, o texto de um campo de formulários para utilizar no seu programa

pegar valor de input com JavaScript capa

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mias sobre formulários, inputs e também JavaScript!

Para resgatar o texto que fica digitado no input vamos precisa selecionar o elemento do input

Podemos utilizar diversos métodos para isso:

  • getElementById
  • getElementByClassName
  • querySelector

E então vamos acessar a propriedade value do elemento, que é onde fica o texto que queremos usar de outra forma

Veja um exemplo prático:

<form action="">
  <input type="text" id="name" name="name">
  <input type="submit" value="Enviar">
</form>

Este é o nosso HTML base, um formulário simples com um único campo que é o que vamos resgatar o valor

Neste caso vamos utilizar a estratégia de querySelector e imprimir seu valor

Quer aprender mais sobre JavaScript? Faça o download do Ebook de JavaScript avançado gratuitamente

Veja a parte de JavaScript necessária:

var input = document.querySelector("#name");

var texto = input.value;

console.log(texto);

Desta forma selecionamos primeiramente o elemento na primeira linha, utilizamos o método querySelector de document

Depois criamos outra variável para o valor, mas isso não é necessário

E por fim imprimimos o texto na tela, e pronto temos o valor/texto do input =)

Conclusão

Neste artigo aprendemos a como pegar valor de input com JavaScript

Primeiramente devemos selecionar o elemento alvo que queremos resgatar o texto

Depois é só acessar a propriedade value, que é onde o texto está inserido e pronto!

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube


Subscribe
Notify of
guest
20 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
code-fox

muito bom me ajudou demais

Battisti

De nada =)

Higor

ta dizendo que a minha variavel que armazeno os dados tá vazia, mesmo depois de inserir o texto

Last edited 1 ano atrás by Higor
Battisti

oi Higor, vc precisa declarar o script depois do HTML ou utilizar o atributo defer, o HTML está carregando antes…

Alguem imaginario

você pode declarar um id no submit e adicionar a função de click para ele executar o comando apenas depois de clicar no botão de enviar

Battisti

Dá também!

Filipe

estou fazendo isto e mesmo assim, diz que o valor é indefinido…

Battisti

tenta carregar o script com o atributo defer…

Jacson Andreola

Fala professor, estou fazendo um sistema com base no movie star, e estou rpecisando pegar o valor de um input e colocar em uma variável, consegue me ajudar. É isso do seu post que preciso, só que em php.

Battisti

oi Jacson, neste caso basta pegar pelo envio do formulário, no $_POST…

Jacson Andreola

Boa tarde professor. Ele me traz esse erro:
Message: Undefined index: servico_item_total

Este é meu input:
<input name=”servico_item_total” value=”<?php echo $orca_serv(…)

Esta é minha linha:
$valor1 = $_POST[‘servico_item_total’];

Obrigado por sua atenção.

Pedro

valeuuuuuuuuuuuu

Battisti

de nada =)

MARCELO DE MACEDO

Boa tarde, Exemplo pequeno e facil…
Mas precisava pegar o valor do INPUT (ou de uma variavel) lá dentro
em CSHARP.. Para cair num Textbox e poder manipula-lo… ja procurei e testei tanta coisa que nao funcionou… 🙁
Se puder dar uma luz…
Abraços

Battisti

opa Marcelo, infelizmente não sei quais tecnologias está utilizando com o C#, mas a ideia é tentar imprimir o valor no value do input por meio do backend…

Jean

como pegar estes valores com varios elementos por exemplo de uma mesma classe , exemplo de for com twig onde são gerados varios botões iguais com a mesma classe , porem o input do tipo hideen tem valores diferentes, neste metodo que vc nos passou conseguimos pegar apenas o primeiro valor da pagina , qual seria a melhor solução

Vitor

Já tentou usar um for? Acho que dá. Tipo, percorrer todos os botões, pegando o valor de cada um

Jhony

E quando o type do input for do tipo TIME ?

Elton

Não resolveu meu problema de pegar o valor do meu input radio

Battisti

Neste caso vai ser algo assim: document.querySelector(‘input[name=”nomeDoInput”]:checked’).value;

20
0
Would love your thoughts, please comment.x