[Resolvido] Adicionar dinamicamente elementos de formulário

cinthia.m · Agosto 24, 2009

Olá,

peguei um script na web que permite adicionar dinamicamente elementos em um formulário. Em uma das minhas páginas, precisei usar este script para mais de uma parte do formulário, então tentei adaptá-lo. Vou escrever as partes que adicionei em vermelho, as demais são do script original:

<script type="text/javascript">
<!--
var counter = 0;
[color="#ff0000"]var counter2 = 0;[/color]

function init() {
document.getElementById('moreFields').onclick = moreFields;
	moreFields();
	
[color="#ff0000"]	document.getElementById('moreFields2').onclick = moreFields2;
	moreFields2();[/color]
}

function moreFields() {
	counter++;
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter;
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

[color="#ff0000"]function moreFields2() {
	counter2++;
	var newFields = document.getElementById('readroot2').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter2;
	}
	var insertHere = document.getElementById('writeroot2');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}[/color]

window.onload = function (){
	moreFields();
	[color="#ff0000"]moreFields2();[/color]
};
// -->
</script>

<form name="meuform" id="meuform" action="minhapagina.php" method="POST">
<div id="readroot" style="display: none">
	<label for="categoria"><span>Categoria:</span>
	<select id="categoria" name="categoria[]">
		<option value="--">--</option>
		<option value="A">A</option>
		<option value="B">B</option>
		<option value="C">C</option>
		<option value="D">D</option>
	</select>
	</label>	 		
	<label for="genero"><span>Genero:</span>  			
	<select id="genero" name="genero[]">
		<option value="--">--</option>
		<option value="feminino">Feminino</option>
		<option value="masculino">Masculino</option>
	</select>
	</label>
	<label for="idade_inicial"><span>Idade inicial:</span><input type="text" name="idade_inicial[]" id="idade_inicial" /></label> 		
	<label for="idade_final"><span>Idade final:</span><input type="text" name="idade_final[]" id="idade_final" /></label> 		
	<input type="button" value="Remover" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

</div>
		
<form method="post" action="../cgi-bin/show_params.cgi">
	<span id="writeroot"></span>
	<input type="button" id="btnMoreFields" onclick="moreFields();" value="Adicionar" />
</form>	  
	
[color="#ff0000"]<div id="readroot2" style="display: none">
	<label for="dia"><span>Dia:</span>
	<select id="dia" name="dia[]">
		<option value="--">--</option>
		<option value="Segunda-feira">Segunda-feira</option>
		<option value="Terça-feira">Terça-feira</option>
		<option value="Quarta-feira">Quarta-feira</option>
		<option value="Quinta-feira">Quinta-feira</option>
		<option value="Sexta-feira">Sexta-feira</option>
		<option value="Sábado">Sábado</option>
		<option value="Domingo">Domingo</option>
	</select>
	</label>	 		 		
	<label for="hr_inicial"><span>Hr inicial:</span>
		<input type="text" name="hr_inicial[]" id="hr_inicial" /> :
		<input type="text" name="min_inicial[]" id="min_inicial" /> 
	</label>
	<label for="hr_final"><span>Hr final:</span>
		<input type="text" name="hr_final[]" id="hr_final" /> :
		<input type="text" name="min_final[]" id="min_final" /> 
	</label> 		
	<label for="visitacao"><span>Visitação:</span>
		<input type="text" name="visitacao[]" id="visitacao" />
	</label>
	<input type="button" value="Remover" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

</div>
			
<form method="post" action="../cgi-bin/show_params.cgi">
	<span id="writeroot2"></span>
	<input type="button" id="btnMoreFields2" onclick="moreFields2();" value="Adicionar" />
</form>
[/color]
</form>

Está funcionando corretamente até dar submit neste formulário, então percebo que os valores dos elementos de readroot2 estão vindo vazios. Já revisei o código várias vezes, o que pode estar faltando? Apagando um (ou readroot ou readroot2) o outro sai no $_POST normalmente.

Aguardo uma luz,

obrigada

Thiago de Oliveira Cruz · Agosto 24, 2009

:]

Isso ai é javascript

E se eu fosse você somente chamava a mesma função novamente... não precisa re criar a função...

Movendo para javascript

Abraços

cinthia.m · Agosto 24, 2009

:]

Isso ai é javascript

E se eu fosse você somente chamava a mesma função novamente... não precisa re criar a função...

Movendo para javascript

Abraços

Obrigada, Berseck!

Assim que postei, percebi que estava na parte errada do forum, até mandei uma mensagem para um dos moderadores mas você foi mais rápido =)

Já tinha tentado chamar a mesma função nas duas partes, mas se fizer isso, ao clicar em qualquer um dos 2 botões vou estar inserindo elementos somente na primeira parte..

Preciso diferenciar de alguma forma aonde serão inseridos os elementos e quais elementos clonar.

Tentei também chamar a mesma funcão nas duas partes, passando como parâmetro o nome da div de origem e do span de destino dos elementos, mas continua não saindo no $_POST

Abraços

Henrique Barcelos · Agosto 25, 2009

já tentou usar jQuery... simplifica muito essas tarefas...

Baixe o core em www.jquery.com, depois faça mais ou menos assim:

$(document).ready(function(){
    $("#btnMoreFields").click(function(){
         for(var i = 0; i < $("#ID DO CAMPO QUE INFORMA A QTDE").val(); i++){
             $("#writeroot").parent().append("<input name='NOME[]'/>" );
         }
    });
});

Se você não sabe jQuery, recomendo aprender... você ganha muita produtividade com isso...

Thiago de Oliveira Cruz · Agosto 25, 2009

Tipo

Eu não sei pq :)

Mas tira esses form de dentro do form principal......

Que eu acredito que vá funcionar

Abraços

cinthia.m · Agosto 25, 2009

Tipo

Eu não sei pq :)

Mas tira esses form de dentro do form principal......

Que eu acredito que vá funcionar

Abraços

--

Gente, resolvido o problema.

Não pude retirar os forms de dentro do form principal pq precisava que os botões de Adicionar aparecessem naqueles lugares específicos =/

Mas isto me deu uma idéia: já que o código funciona quando tem somente 1 form dentro do form principal e a action eh a mesma, coloquei o primeiro form começando e só terminando lá embaixo depois do outro botão. O código ficou assim:

<script type="text/javascript">
<!--
var counter = 0;
var counter2 = 0;

function init() {
	document.getElementById('btnmoreFields').onclick = moreFields;
	moreFields();
	
	document.getElementById('btnmoreFields2').onclick = moreFields2;
	moreFields2();
}

function moreFields() {
	counter++;
	var newFields = document.getElementById('readroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name;
		if (theName) {
			newField[i].name = theName + counter;
		}
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

function moreFields2() {
	counter2++;
	var newFields = document.getElementById('readroot2').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name;
		if (theName) {
			newField[i].name = theName + counter2;
		}
	}
	var insertHere = document.getElementById('writeroot2');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = function (){
	moreFields();
	moreFields2();
};
// -->
</script>

<div id="readroot" style="display: none">
   <!-- todos os seus inputs, selects, etc aqui -->
   <input type="button" value="Remover" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>

<form method="post" action="../cgi-bin/show_params.cgi">
   <span id="writeroot"></span>
   <input type="button" id="btnMoreFields" onclick="moreFields();" value="Adicionar" />
<!-- não feche o form ainda!! -->

<div id="readroot2" style="display: none">
   <!-- seu segundo conjunto de inputs, selects, etc aqui -->
   <input type="button" value="Remover" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>

   <span id="writeroot2"></span>
   <input type="button" id="btnMoreFields2" onclick="moreFields2();" value="Adicionar" />
</form>

Desta forma pode-se colocar quantos conjuntos de elementos se quiser, observando que para cada conjunto deve-se ter um div readroot, um span writeroot, uma função moreFields, iniciar a função no onload da página e todos os elementos dentro das divs devem ser arrays (atributo name="meuelemento[]").

Valeu todo mundo! =D

Thiago de Oliveira Cruz · Agosto 25, 2009

=]

Ta vendo? não era nenhum bixu de 7 cabeças :P

Era um form no lugar errado :D

Abraços

Entrar

Arquivado

[Resolvido] Adicionar dinamicamente elementos de formulário

Recommended Posts

cinthia.m 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago de Oliveira Cruz 21

Compartilhar este post

Link para o post

Compartilhar em outros sites

cinthia.m 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago de Oliveira Cruz 21

Compartilhar este post

Link para o post

Compartilhar em outros sites

cinthia.m 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago de Oliveira Cruz 21

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante