10

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 2

18

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();
});

http://jsfiddle.net/vkxzf/

1
  • Ganhou o premio resposta correta pelo 403 do Michael :)
    – user2692
    19/06/2014 às 1:42
8

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();
}

Exemplo no jsFiddle

5
  • Michael, seu exemplo está dando Forbbiden 403. Acho que alert() é alertado como algum tipo de XSS no JSFiddle
    – user2692
    19/06/2014 às 1:41
  • É que faltou previnir o envio do formulário.
    – bfavaretto
    19/06/2014 às 1:43
  • 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 o preventDefault com addEventListener? Exemplo: jsfiddle.net/MUs87/4
    – Michael
    19/06/2014 às 1:57
  • O preventDefault() que você usa no keydown funcionou normalmente para mim. O outro eu acho que não funciona porque você precisa previnir o evento submit do formulário, não do botão.
    – bfavaretto
    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)
    – Michael
    19/06/2014 às 2:08

Você deve fazer log-in para responder a esta pergunta.