Manipulando caixas de texto (textbox) com JavaScript
Aprendendo como os campos textbox, password e textarea funcionam com o Javascript

Nesta matéria veremos como o JavaScript pode trabalhar com os controles:

• input=text
• input=password
• textarea

Escolhi esses controles pois são bastantes semelhantes quanto ao seu funcionamento.

Vamos utilizar o mesmo formulário que “pegamos emprestado” do livro do Andy Budd (Criando Páginas Web com CSS).

Clique na aba HTML para entender melhor sobre formulário web

Em PHP podemos enviar e receber os dados do formulário, também podemos carregar o formulário. Quer dizer, podemos abrir o formulário com dados pré carregados.

Em JavaScript poderemos fazer as mesmas requisições que o PHP, utilizando um negócio chamado XMLHttpRequest (vulgo AJAX), haaaa mas não vamos falar sobre AJAX, é um pouco cedo, por enquanto vamos fazer coisas mais simples.

Então, o que faremos em JavaScript?

Que tratamento daremos ao pequeno formulário do Andy Budd?

Que tal começarmos referenciando o botão submit?

document.getElementById("btnSubmit")

Não se esqueça que você precisará do id, por tanto, altere o HTML incluindo a propriedade id.

...
<input type="submit" id="btnSubmit" value="Submit!" />
...

A propriedade id está para o JavaScript assim como a propriedade name está para o PHP.

Profundo isso! rssss

Falando sério, para referenciarmos os controles ou qualquer elemento HTML precisamos que eles tenha a propriedade id “setada”. Ok, isso não é via de regra e não é mesmo. Podemos encontrar (referenciar) os elementos através dos nomes das tags, através de outras propriedades, pelo posicionamento na árvore DOM e etc… Mas o básico é referenciar pelo id.

Agora, vamos atribuir uma função anônima para o evento onclick de nosso controle.

document.getElementById("btnSubmit").onclick = function() {
}

Lembra que o botão do tipo submit (<input type="submit") dispara o evento submit do formulário web?

Atribuir uma função ao evento onclick não anulará a ação padrão, então precisaremos mudar nosso HTML mais uma vez. O botão passa a ser do tipo “button”, veja:

...
<input type="button" id="btnSubmit" value="Submit!" />
...

Nossa função fará o óbvio, buscará os controles e mostrará no console do FireBug seus valores, veja como ficou:

document.getElementById("btnSubmit").onclick = function() {

    var txtAutor   = document.getElementById("author");
    var txtEmail   = document.getElementById("email");
    var txtPass    = document.getElementById("pass");
    var txtComents = document.getElementById("text");

    console.log(txtAutor.value);
    console.log(txtEmail.value);
    console.log(txtPass.value);
    console.log(txtComents.value);

    // código para efetuar o submit (provavelmente AJAX)
}