Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoM

[Resolvido] Adicionar mais um campo

Por , em Javascript

Recommended Posts

FabianoM    0

FabianoM
Postado

Bom dia galera.

 

Bom estou fazendo um sistema PHP, porém não manjo de javascript e estou querendo o seguinte:

 

Tenho uma tabela assim:

 

<form action="cadastrar.php" name="formulario" id="formulario">
<table border="0">
    <tr>
       <td>Nome</td>
       <td>Telefone</td>
    </tr>
    <tr>
       <td><input type="text" name="nome" size="100"></td>
       <td><input type="text" name="telefone" size="50"></td>
    </tr>
</table>
<input type="submit" value="Salvar">
</form>

assim ele salva apenas um nome e um telefone, mas queria algo em javascript q a pessoa pudesse inserir mais campos pra adicionar nomes e telefones, preciso de algo da seguinte forma:

 

<input type="submit" value="Salvar"> OU ADICIONAR <input type="text" name="mais campos" size="10"> e <input type="button" value="Executar">

Onde ele possa escolher quantos campos quer inserir a mais.

 

Não tenho conhecimento em Javascript, entao se alguem tiver uma idéia básica de como devo fazer, ou pelo menos começar a fazer isso agradeço

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

O código a seguir ficou muito bom. Foi testado no IE7 e FF.

 

<html>
<head>
<style type="text/css">
div.esq {width:400px; float:left;}
div.dir {width:200px; float:left;}
div.linha {display:block; clear:both;}
</style>

<script type="text/javascript">

function addCampos() {
var objDiv = document.getElementById("cmp1");
var qtdeCampos = document.getElementById("qtde1").value;
var constDiv = objDiv.innerHTML;
	
	for (var i=1; i<=qtdeCampos; i++) {
		constDiv += '<div class="linha"><div class="esq"><input type="text" name="nome'+i+'" size="50"></div><div class="dir"><input type="text" name="tel'+i+'"></div></div>';
	}
	
	objDiv.innerHTML = constDiv;
}
</script>

</head>
<body>

<form name="form1" class="form1" action="" method="post">
<div class="esq">Nome</div><div class="dir">Telefone</div>
<br>
<div class="esq"><input type="text" name="nome0" size="50"></div><div class="dir"><input type="text" name="tel0" size="20"></div>
<div id="cmp1"></div>

<br><br><input type="submit" value="Salvar"> ou adicionar mais <input type="text" id="qtde1" size="5"> campos.
<input type="button" value="OK" onclick="addCampos()">
</form>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Obviamente, no PHP que irá receber os dados, você deverá bolar algum mecanismo para saber quais campos foram enviados ou não. Você também poderá desenvolver esse mecanismo em JavaScript, mas essa seria outra questão que foge do escopo do tópico.

 

Testei o código e está funcionando bem com método GET. Com POST não tem porque ser diferente...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito