Como novato na linguagem 'JS', gostaria de saber como, simplesmente, pegar texto de um <form>
(sem encaminhar para outra página e sem alterar a URL) e passar para uma função como alert()
quando o usuário der enter no <input>
(text/password) ou clicar no <input>
(submit).
2 Respostas
Nesse exemplo simples, é possível resolver tratando apenas o evento submit
do próprio formulário:
<form id="formulario">
<input type="text" id="campo">
<input type="submit" value="Enviar">
</form>
var form = document.getElementById('formulario');
var campo = document.getElementById('campo');
form.addEventListener('submit', function(e) {
// alerta o valor do campo
alert(campo.value);
// impede o envio do form
e.preventDefault();
});
-
Ganhou o premio resposta correta pelo 403 do Michael :)– user269219/06/2014 às 1:42
No código Javascript abaixo (não usei jQuery), existem dois eventos: um para detectar a tecla no momento em que o valor é digitado no input
, e outro para detectar o clique no botão "Enviar".
HTML:
<form method="get">
<input type="text" id="meu-input" />
<input type="submit" id="meu-submit" value="Enviar" />
</form>
Javascript:
// Função que mostra o valor do input num alert
function mostrarValor() {
alert(document.getElementById("meu-input").value);
}
// Evento que é executado toda vez que uma tecla for pressionada no input
document.getElementById("meu-input").onkeypress = function(e) {
// 13 é a tecla <ENTER>. Se ela for pressionada, mostrar o valor
if (e.keyCode == 13) {
mostrarValor();
e.preventDefault();
}
}
// Evento que é executado ao clicar no botão de enviar
document.getElementById("meu-submit").onclick = function(e) {
mostrarValor();
e.preventDefault();
}
-
Michael, seu exemplo está dando Forbbiden 403. Acho que alert() é alertado como algum tipo de XSS no JSFiddle– user269219/06/2014 às 1:41
-
-
Ah sim, mancada. É o sono! =) Em todo caso, estou testando aqui e ao adicionar o
e.preventDefault();
acontecem umas coisas estranhas (o campo é zerado, ou o alert não aparece). Será que ele só dá para usar opreventDefault
comaddEventListener
? Exemplo: jsfiddle.net/MUs87/4– Michael19/06/2014 às 1:57 -
O
preventDefault()
que você usa nokeydown
funcionou normalmente para mim. O outro eu acho que não funciona porque você precisa previnir o eventosubmit
do formulário, não do botão. 19/06/2014 às 2:01 -
Ah sim, era isso mesmo, obrigado! Além disso, o keydown com o preventDefault estava fazendo aparecer dois alerts em sequência para mim. Mudei para keypress e ficou legal. Vou atualizar a resposta (embora sua solução esteja obviamente melhor)– Michael19/06/2014 às 2:08