Botão + para adicionar campos ao Formulário (JavaScript, HTML ou PHP)

Assuntos Gerais
#1

Olá pessoal, estou com o seguinte problema e gostaria de saber se alguem pode me ajudar:

Tenho dentro de um formulário, o local para cadastro de passageiros de uma viagem.

Os campos para o cliente cadastrar já estão ok, o que eu preciso é criar um botão “+” para que quando ele clique nesse botão sejam criados mais campos para cadastro de um acompanhante para a viagem.

Então toda vez que ele clicar no “+” será adicionado um acompanhante e seram criados mais campos para cadastro dos dados desse acompanhante, exemplo: Nome, Endereço, Telefone, CPF, RG, Passaporte… etc.

Alguem conhece algo que possa me ajudar? Pode ser em PHP ou JavaScript mesmo.

Grato, Lucas

#2

Entendi o que você quer fazer.

Se fosse você, criaria uma combo com um número de acompanhantes que serão cadastrados. Quando o usuário ecolher a quantidade, iria utilizar o JS para liberar os campos já definidos na página. Os mesmos estariam ocultos. Somente depois da escolha, liberaria os campos com JS. Já fiz várias aplicações utlizando JS e CSS com a propriedade display.

Nesse caso os campos já estariam criados, o sistema só iria liberar de acordo com a escolha do usuário. No caso de dois acompanhantes, iria liberar dois paineis com as informações dos mesmos.

Lembrando que essa é só uma ideía, com JS você com certeza pode fazer muita coisa.

Abraço.

#3

[quote=alberthy]Entendi o que você quer fazer.

Se fosse você, criaria uma combo com um número de acompanhantes que serão cadastrados. Quando o usuário ecolher a quantidade, iria utilizar o JS para liberar os campos já definidos na página. Os mesmos estariam ocultos. Somente depois da escolha, liberaria os campos com JS. Já fiz várias aplicações utlizando JS e CSS com a propriedade display.

Nesse caso os campos já estariam criados, o sistema só iria liberar de acordo com a escolha do usuário. No caso de dois acompanhantes, iria liberar dois paineis com as informações dos mesmos.

Lembrando que essa é só uma ideía, com JS você com certeza pode fazer muita coisa.

Abraço.[/quote]

Certo, com essa opção do display ele oculta os campos certo? Isso vai mecher na tabulação da página? Exemplo, ficará um espaço vazio no formulário com esses campos ocultos ou só ao liberar eles havera uma quebra de linhas do conteudo abaixo desses campos para exibi-los?

#4

[b]Ok.

Não me lembro muito bem no caso de usar só o HTML e JS ou PHP no caso, acho que fica o espaço sim.

Mas você pode criar uma DIV do lado direito da página com os painéis de cada acompanhante, não deixando assim, os espaços no formulário.

Do lado direito da página é local que mais sobra espaço.

De qualquer forma tente fazer. Já é mais um aprendizado. Pode ser que você tenha outra idéia que não tenho no momento. Assim que se aprende.

Abraço.[/b]

#5

[quote=alberthy][b]Ok.

Não me lembro muito bem no caso de usar só o HTML e JS ou PHP no caso, acho que fica o espaço sim.

Mas você pode criar uma DIV do lado direito da página com os painéis de cada acompanhante, não deixando assim, os espaços no formulário.

Do lado direito da página é local que mais sobra espaço.

De qualquer forma tente fazer. Já é mais um aprendizado. Pode ser que você tenha outra idéia que não tenho no momento. Assim que se aprende.

Abraço.[/b][/quote]

Consegui usar ja o display.

O único problema é que teria que gerar um botão pra cada acompanhante que fosse gerado.

#6

use essa funções para clonar a div e td os elemento filhos.


function duplicarCampos(){
	var clone = document.getElementById('origem').cloneNode(true);
	var destino = document.getElementById('destino');
	destino.appendChild (clone);
	
	var camposClonados = clone.getElementsByTagName('input');
	
	for(i=0; i<camposClonados.length;i++){
		camposClonados[i].value = '';
	}
	
	
	
}

function removerCampos(id){
	var node1 = document.getElementById('destino');
	node1.removeChild(node1.childNodes[0]);
}

exemplo, lembre de usar o nome do input com [] pois facilita na hora de recuperar os valores.

	<div id="origem" align="center">
		Fone <input type="text" id="fone" name="fone[]"  maxlength="14" size="14"/>
		<img  src="../img/add.gif" style="cursor: pointer;" onclick="duplicarCampos();">
		<img  src="../img/cross.gif" style="cursor: pointer;" onclick="removerCampos(this);"> 
	</div>
	
	<div id="destino">
	</div>
#7

[quote=perdeu]use essa funções para clonar a div e td os elemento filhos.


function duplicarCampos(){
	var clone = document.getElementById('origem').cloneNode(true);
	var destino = document.getElementById('destino');
	destino.appendChild (clone);
	
	var camposClonados = clone.getElementsByTagName('input');
	
	for(i=0; i<camposClonados.length;i++){
		camposClonados[i].value = '';
	}
	
	
	
}

function removerCampos(id){
	var node1 = document.getElementById('destino');
	node1.removeChild(node1.childNodes[0]);
}

exemplo, lembre de usar o nome do input com [] pois facilita na hora de recuperar os valores.

	<div id="origem" align="center">
		Fone <input type="text" id="fone" name="fone[]"  maxlength="14" size="14"/>
		<img  src="../img/add.gif" style="cursor: pointer;" onclick="duplicarCampos();">
		<img  src="../img/cross.gif" style="cursor: pointer;" onclick="removerCampos(this);"> 
	</div>
	
	<div id="destino">
	</div>

[/quote]

Ja adptei o botão pra + e -.

Está batendo com a idéia que tenho.

Só tenho uma dúvida, na hora de passar pro banco de dados o valor desses textbox, vai ter problema o campo ser clonado?

Grato, Lucas

#8

[b]No caso de cada botão para os acompanhantes você pode criar somente um botão mas com um controle. Esse controle você terá que fazer de alguma maneira.

Abraço.[/b]

#9

não tem problema pq esses campos vão como um array.

vc esta usando php?

o botão ‘+’ e ‘-’ estão como imagem, no exemplo.

#10

[quote=perdeu]não tem problema pq esses campos vão como um array.

vc esta usando php?

o botão ‘+’ e ‘-’ estão como imagem, no exemplo.[/quote]

Estou sim.

Na verdade o banco de dados não está criado ainda, está ficando pronto o layout.

Vou usar PHP + MySQL.

O botão ‘+’ e ‘-’ eu acertei já, passei pra receber o value e não o type.

#11

faz um teste clona uns campos e da um print_r();

o resultado vai ser mais ou menos assim

   telefones => 

      [0] => 'teste 0'
      [1] => 'teste 1'
      [2] => 'teste 2'

ai é so iterar e mandar gravar.

#12

[quote=perdeu]faz um teste clona uns campos e da um print_r();

o resultado vai ser mais ou menos assim

   telefones => 

      [0] => 'teste 0'
      [1] => 'teste 1'
      [2] => 'teste 2'

ai é so iterar e mandar gravar.[/quote]

Desculpa mas acho que não entendi

Onde eu dou o print_r();?

É que sou iniciante em programação pra web

#13

Usei o Inspecionar elemento do Google Chrome pra ver o que ele gerou e os nomes clonados estão iguais.

#14

da o print_r() na pagina q recebera os valores do $_POST

#15

O problema agora é que ao duplica os campos ele continua com o mesmo nome.

Exemplo: O primeiro campo é o CPF e ele está como:

Ao duplica-lo quando ele vai pra div “destino” ele continua com o mesmo nome:

Meu código está assim:

[code]<body>
<script>
function duplicarCampos(){
var clone = document.getElementById(‘origem’).cloneNode(true);
var destino = document.getElementById(‘destino’);
destino.appendChild (clone);

var camposClonados = clone.getElementsByTagValue('+');

for(i=0; i&lt;camposClonados.length;i++){
	camposClonados[i].value = '';
}

}

function removerCampos(id){
var node1 = document.getElementById(‘destino’);
node1.removeChild(node1.childNodes[0]);
}
></script>
<div id=“origem” align=“center”>

Fone
<input type=“text” id=“fone1” name=“fone[1]” maxlength=“14” size=“14”/>


RG
<input type=“text” id=“rg1” name=“rg[1]” maxlength=“14” size=“14”/>


CPF
<input type=“text” id=“cpf1” name=“cpf[1]” maxlength=“14” size=“14”/>
<input type=“submit” value="+" onclick=“duplicarCampos();”>
<input type=“submit” value="-" onclick=“removerCampos(this);”>


</div> 
&lt;div id="destino"&gt;
&lt;/div&gt;

</body>[/code]

#16

o nome fica o mesmo sim. vc precisa q os id’s/nomes sejam diferentes?

#17

É que eu não fiz a conexão com o banco de dados ainda, mas tem que diferenciar o id ou o nome certo?

#18

depende da situação.

tira o 1 dos conchetes dos campos. deixe assim: fone[] rg[]

name="fone[1]"
#19

[quote=perdeu]depende da situação.

tira o 1 dos conchetes dos campos. deixe assim: fone[] rg[]

name="fone[1]" [/quote]

Já tirei, ele continua clonando e deixando igual, agora ele gera um <input type="text" id="fone1" name="fone[]" maxlength="14" size="14"/>

#20

precisa ser diferente os id’s e name? se n vai td tranquilo