Pegar dados de formulário HTML

29/01/2013

54

Olá, galera!
Estou aqui com uma dúvida que acho que é bastante simples (não pra mim rsrs).
Tenho um form HTML com alguns campos e, ao clicar no botão submit, preciso pegar os dados dos campos e montar um string. Tipo assim:
Nome: nome da pessoa;
Telefone: telefone da pessoa;
Email: email da pessoa;


Existe uma forma de, sei lá, percorrer o formulário e pegar esses valores, identificando a que campo cada um se refere? Quero dizer: pegar o valo de um input e saber que ele é o do Nome ou Telefone, para montar o string.

Grata.
Responder

Posts

29/01/2013

Joel Rodrigues

Oi, Carla, tudo bem?
Você poderia mostrar o código do seu formulário? Assim fica mais fácil pra tentar te ajudar.
Responder

29/01/2013

Danilo Gomes

Não sei se ajuda, mas você poderia fazer isso atribuindo um "id" aos campos e utilizando document.getElementById(id).value em javascript.
Responder

29/01/2013

Carla Batista

Oi, obrigada pelas respostas. Meu form tá assim:
<form>
	Nome: <input type="text" id="txtnome"/>
	<br/>
	Telefone: <input type="text" id="txttelefone"/>
	<br/>
	Email: <input type="text" id="txtemail"/>
	<br/>
	<input type="submit" value="enviar"/>
</form>

No caso, ao clicar no submit, queria montar um string com os dados dos três campos.
Obrigada mais uma vez.
Responder

29/01/2013

Danilo Gomes

Você pode fazer uma função em JS que pegue esses valores.

function enviar(){

var nome = document.getElementById("txtnome");
var telefone = document.getElementById("txttelefone");
var email = document.getElementById("txtemail");

var texto = nome + telefone + email; // como quiser formatar

return true;

}


E seu form pode ter um evento onsubmit que pegue o retorno dessa função.
Se for true, ele faz o submit, senão, não faz.

Isso pode ficar:
<form onsubmit="return enviar();">
Responder

29/01/2013

Joel Rodrigues

Só complementando o código do amigo, é preciso pegar a propriedade value de cada campo. Depois você monta a string conforme o exemplo.
Responder

29/01/2013

Joel Rodrigues

Então o código acima ficaria assim:
function enviar(){

var nome = document.getElementById("txtnome").value;
var telefone = document.getElementById("txttelefone").value;
var email = document.getElementById("txtemail").value;

var texto = "Nome: " +nome + "; Telefone: "+ telefone + "; Email: "+email; // como quiser formatar

return true;

}


Teste e nos dê um retorno. Boa sorte.
Responder

29/01/2013

Carla Batista

Obrigada, gente. Deu certo. Era isso mesmo que eu queria.
Agora sem querer abusar, se o meu form for crescendo, eu vou ter de fazer pra todos os campos, né?
Tudo bem que não dá muito trabalho, mas teria uma forma de fazer algo mais genérico?
Grata.
Responder

30/01/2013

Danilo Gomes

Você pode usar o getElementsByTagName (atente-se ao "S" em "Elements")
https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName

Vai te retornar uma coleção de elementos se fizer document.getElementsByTagName('input').

Para cada elemento, pode acrescentar um atributo "alt" que descreva aquele campo (em seu formulário).

Poderia fazer algo similar a (se tiver algo errado, corrijam):
for (i=0; i<itens.length; i++){ 
    itens[i].getAttribute("alt") + ": " + itens[i].getAttribute("value");
}


Uma alternativa é conhecer o jQuery, que facilitaria bastante esse trabalho.
Responder

30/01/2013

Carla Batista

Muito obrigada pela resposta, Midas. No caso esse "itens", eu pegaria usando a função getElementsByTagName que você citou?
Seria assim:
itens = getElementsByTagName(input);


E depois fazer esse for?
Responder

31/01/2013

Danilo Gomes

Isso mesmo, ele quem vai te retornar os itens correspondentes a uma tag específica, no seu caso, input
Responder

31/01/2013

Carla Batista

Ah, agora sim. Deu certo, Midas. Muitíssimo obrigado.
Podem encerrar este tópico, por favor.
Responder

31/01/2013

Joel Rodrigues

Obrigado pelo retorno, Carla. E obrigado ao amigo Midas.
Nesse caso estou encerrando o tópico.
Responder