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

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.

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.

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?

[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]

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]

Consegui usar ja o display.

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

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>

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>

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

[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]

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.

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.

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.

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.

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.

Desculpa mas acho que não entendi

Onde eu dou o print_r();?

É que sou iniciante em programação pra web

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

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

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

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

<input type="text" id="cpf1" name="cpf[1]"  maxlength="14" size="14"/>

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

<input type="text" id="cpf1" name="cpf[1]"  maxlength="14" size="14"/>

Meu código está assim:

<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<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">
		<p>Fone 
		  &lt;input type="text" id="fone1" name="fone[1]"  maxlength="14" size="14"/&gt;
	  </p>
		<p>RG 
		  &lt;input type="text" id="rg1" name="rg[1]"  maxlength="14" size="14"/&gt;
	  </p>
		<p>CPF 
		  &lt;input type="text" id="cpf1" name="cpf[1]"  maxlength="14" size="14"/&gt;
		  &lt;input type="submit" value="+" onclick="duplicarCampos();"&gt;
		  &lt;input type="submit" value="-" onclick="removerCampos(this);"&gt; 
	            </p>
	&lt;/div&gt;
	
	&lt;div id="destino"&gt;
	&lt;/div&gt;

&lt;/body&gt;

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

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

depende da situação.

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

name="fone[1]"

perdeu:

depende da situação.

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

name="fone[1]"

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

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

precisa, pelo menos um dos dois

pq, n entendi qual é o problema de serem iguais

Porque na hora de serem passados pro banco de dados as informações eu tenho que ter a diferenciação dos campos

na hora de gravar no banco vc vai fazer 3 foreach uma pra cada campo.

Então não precisa?

E se eu duplico o campo com um valor dentro o valor passa pro novo campo, tem como dar um clear nisso?

Valeu

isso aqui deveria limpar os campos

var camposClonados = clone.getElementsByTagName('input');  
      
    for(i=0; i<camposClonados.length;i++){  
        camposClonados[i].value = '';  
    }

está assim:

var camposClonados = clone.getElementsByTagValue('+');
	
	for(i=0; i<camposClonados.length;i++){
		camposClonados[i].value = '';
	}

deixa input no lugar do ‘+’

Troquei e ele continua clonando as informações

eu uso essa função para limpar campos...

<script type="text/javascript">
function limpaCampo( id_campo1, id_campo2 ){        
	document.getElementById( id_campo1 ).value = "";
	document.getElementById( id_campo2 ).value = "";
}
</script>

No caso tenho 3 radio buttons, e quando seleciono um, limpo os outros dois...

Pacato:

eu uso essa função para limpar campos...

<script type="text/javascript">
function limpaCampo( id_campo1, id_campo2 ){        
	document.getElementById( id_campo1 ).value = "";
	document.getElementById( id_campo2 ).value = "";
}
</script>

No caso tenho 3 radio buttons, e quando seleciono um, limpo os outros dois...

bacana

Aqui esta os botões de radio completos… passei dificuldade para adaptar, para enviar para o form o que eu digitei e apagar e ocultar os outros…

<script type="text/javascript">
function mostraCampo(value) {
	if(value==1){
	   document.form.dispositivoCL.style.visibility = "visible";
	   document.form.simcardCL.style.visibility = "hidden";
	   document.form.linhaCL.style.visibility = "hidden";
	   limpaCampo( 'simcardCL', 'linhaCL' );
	} else if (value ==2){
		 document.form.simcardCL.style.visibility = "visible";
		 document.form.dispositivoCL.style.visibility = "hidden";
		 document.form.linhaCL.style.visibility = "hidden";
		 limpaCampo( 'dispositivoCL', 'linhaCL' );
	} else {
		document.form.linhaCL.style.visibility = "visible";
		document.form.dispositivoCL.style.visibility = "hidden";
		document.form.simcardCL.style.visibility = "hidden";
		limpaCampo( 'dispositivoCL', 'simcardCL' );
	}
}
</script>

<script type="text/javascript">
function OnSubmitForm(){  
	if(document.form.dispositivoCL.checked == true)  {    
		document.form.dispositivoCL.onsubmit;  }  
	else if(document.form.simcardCL.checked == true)  {    
		document.form.simcardCL.onsubmit;  }  
	else {
		document.form.linhaCL.onsubmit;  }
	return true;
}
</script> 

<script type="text/javascript">
function limpaCampo( id_campo1, id_campo2 ){        
	document.getElementById( id_campo1 ).value = "";
	document.getElementById( id_campo2 ).value = "";
}
</script> 


<body> 
	<center>
	<form name="form" id="form" action="ServletPesquisa" method="get">
			<div class="titulo"> Sistema Gest&atilde;o SIM Card <br><br></div>
			<div class="titulo"> =-= CONSULTA COLETIVA =-= </div>
	<br>
	<br>
	<table border="1px">
		<tr class="tabela">
			<td>
			<input type="radio" name="chk1" id="chk1" onclick="javascript:mostraCampo(1);" value="1" />
			Dispositivo: <input type="text" size="22" name="dispositivoCL" id="dispositivoCL" style="visibility:hidden;" />
			
			<input type="radio" name="chk1" id="chk1" onclick="javascript:mostraCampo(2);" value="2" />
			SIMCard: <input type="text" size="22" name="simcardCL" id="simcardCL" style="visibility:hidden;" />
			
			<input type="radio" name="chk1" id="chk1" onclick="javascript:mostraCampo(3);" value="3" />		
			Linha: <input type="text" size="22" name="linhaCL" id="linhaCL" style="visibility:hidden;" />
			</td>
		</tr>	
	</table>
	<br>
	<br>
	<input type="submit" value="Pesquisar" />
	<br>
	<br>
	</form>
</body>

Cara, que tal você usar uma framework JS para tratar disso? Você faz isso com muita simplicidade, além de trabalhar com um conceito MVVM no Javascript.

Dê uma olhada no Knockout.js e no AngularJS, as duas que eu mais gosto. Talvez te interesse, pois acho muito produtivo o uso desse tipo de framework (eu uso AngularJS, normalmente, mas o Knockout.js também é fantástico!). Com elas, você cria seus objetos em um escopo da sua página, e pode fazer essa sua “criação de uma nova linha” bem simples, apenas adicionando um objeto no array do escopo e a View já reconhece isso!

Espero ter ajudado,
fique com Deus!

vou dar uma olhada.