Adicionar novos campos dinâmicamente

[black_pilot 0]

Oi gente,Eu não sou muito bom na parte de design, mas como a gente tem que programar de tudo um pouco, estou recorrendo aos meus colegas da área, vocês.Eu tenho o seguinte problema: Tenho um textfield que armazena um autor. Mas pode acontecer de o usuário precisar cadastrar mais de um autor.A minha idéia é criar um link ao lado do textfield e, qdo o usuário clicar, ele criaria um novo textfield para inserir o novo autor. E ele poderia inserir quantos quisesse.Não se liguem na parte do php, essa parte eu sei fazer. Só não sei como criar essa parte dinâmica no html.Alguém pode me ajudar?Abraços,Raphael

[Mário Monteiro 179]

[tr][/tr][tr][/tr]

ASP

<form name="nome_do_form"> <% NumeroAutor = 10   FOR I = 1 TO NumeroAutor %>   <span id="autor<%=I%>" style="display: <%IF I <> 1 THEN%>none <%ELSE%>''<%END IF%>;"> <%IF I <> 1 THEN%> <p> <br> <%END IF%> <input type="text" name="Autor<%=I%>" size="20"> </span>   <span id="botao<%=I%>" style="display: <%IF I <> 1 THEN%>none <%ELSE%>''<%END IF%>;"> <% IF I <> NumeroAutor THEN%> <input type="button" onClick="autor<%=I+1%>.style.display='';botao<%=I%>.style.display= 'none';botao<%=I+1%>.style.display= '';nome_do_form.Numautor.value = parseInt(nome_do_form.Numautor.value) + 1;" value="+" name="btn+"> <%END IF%> <% IF I <> 1 THEN%> <input type="button" onClick="autor<%=I%>.style.display='none';botao<%=I-1%>.style.display= '';botao<%=I%>.style.display= 'none';nome_do_form.Numautor.value = parseInt(nome_do_form.Numautor.value) - 1;" value="-" name="btn-"> <%END IF%> </span>   <% NEXT %> <input type="hidden" name="Numautor" value=1> </form>

 

cara o codigo acima é uma solucao ASP é só converter para PHP e testar se é isso que você quer, não sei PHP por isso não postei já pronto pra você, mas qualquer duvida na adaptação do codigo me pergunta que te digo o que é feito em ASP ai você altera

 

OBS: Coloquei um campo oculto que armazena a quantidade de campos usados, pois não dá pra adicionar dinamicamente um campo e carregar uma certa quantidade e oculta-las mostrando apenas uma. Assim este campo facilita na proxima page na hora de pegar a quantidade de autores corretamnete.

 

O codigo ASP usado é bem simples, uso um campo PARA(FOR) que vai de um até a quantidade de campos que mando listar, que está armazenado numa variavel, acho que ai você muda de NumeroAutor = 10 para $NumeroAutor = 10.

 

E onde tem <%=I%> só estou mandando escrever o valor do indice I usado no FOR, para diferenciar os nomes dos campos TEXT e os ID's dos SPAN, acho que ai você vai mudar pra echo(I), ou mais ou menso isso. Tudo que está entre <% e %> é codigo ASP, ou seja é onde terá que mudar pra PHP

[black_pilot 0]

Cara, agradeço muito a sua resposta e a sua ajuda.Mas não era bem isso que eu queria...Digo isso pq eu não posso fazer essa operação do lado do servidor, como você sugeriu, mas sim do lado do cliente, através de javascript, css ou dhtml (e se tiver qq outra coisa que funcione, otimo! hehe)Assim mesmo muito obrigado, desculpa por você acabar tendo perdido o seu tempo inutilmente :(

[Mário Monteiro 179]

cara mas foi o que postei, a pagina carrega um certo numero de campos, mas apenas um é exibido e o resto é exibido apenas se for necessário com um botão, depois de carregar as ações ficam todas no cliente

[black_pilot 0]

cara mas foi o que postei, a pagina carrega um certo numero de campos, mas apenas um é exibido e o resto é exibido apenas se for necessário com um botão, depois de carregar as ações ficam todas no cliente

Sim, eu vi isso depois hehe, foi malMas assim mesmo não adiantou, pq dessa forma eu teria um número limite de campos (claro, eu poderia colocar 200 milhões de campos e pronto).É uma solução sim, com certeza. Mas eu to olhando uma aqui utilizando innerhtml que parece ser bastante interessante.Assim mesmo, brigado

[Mário Monteiro 179]

cara se solucioar seu problema posta pro povo seu codigo pra ter mais um tipo de solução pro problema.No aguardo da mesma

[black_pilot 0]

Bom, pra quem precisar:

 

Tá comentadinho, qualquer dúvida é só perguntar. Ah, não sei se funciona em outros navegadores além do IE. Não fiz muita verificação disso pq é numa intranet ;-) Seria até legal alguém testar.

 

O código é muito porco, mas funciona:

 

Script para criação e remoção dinamica de um campo<script language="javascript">	numAutores = 1;	/*  * No caso, o sistema criava um novo campo autor.   * Essa função é chamada toda vez que o usuário clica em "novo autor"  * Se você ver, a opção remover autor só aparece quando existe mais de um campo autor. Ou seja, é obrigatório  * pelo menos o preenchimento de um autor   */			function criaNovoAutor()	{  campo = document.getElementById("novoAutor");  numAutores++; 	   campo.innerHTML = campo.innerHTML + "<br>Autor " + numAutores + ":        <INPUT NAME='txtAutor[]' TYPE='TEXT' ID='txtAutor[]' VALUE='' SIZE='50' MAXLENGTH='50'>";	    //Adiciona a opção de   if (numAutores == 2)  { 	 campodiv = document.getElementById("removeAutor"); 	 campodiv.innerHTML = campodiv.innerHTML + " || <a href='javascript:removerAutor();'> Remover autor </a>";  }  	}	/*  * Essa função é acionada quando se clica em "remover autor" (que é um link incluido na função anterior)  * Caso o número de autores fique igual a um, então ele retira o link "remover o autor  */			function removerAutor()	{  // Verifica se o número de autores é maior que um  if(numAutores == 1) 	 return;  campo = document.getElementById("novoAutor");    str = campo.innerHTML;  // Pega a posição do string do autor    strbusca = "<BR>Autor " + (numAutores);	  strbusca = strbusca.toLowerCase();  posicao = (str.toLowerCase()).indexOf(strbusca);  str = str.substr(0,posicao);  campo.innerHTML = str;    numAutores --;    if(numAutores == 1)  { 	 // Se entrar aqui, deve-se retirar o link "remover autor" 	 campodiv = document.getElementById("removeAutor"); 	 str = campodiv.innerHTML; 	 posicao = str.indexOf(" ||"); 	  	 str = str.substr(0,posicao); 	 campodiv.innerHTML = str;    }	}	/*  *  * Função que apaga todos os autores até sobrar um  *  */		function apagaAutores()	{  while(numAutores > 1) 	 removerAutor();	  campodiv = document.getElementById("removeAutor");  campodiv.innerHTML = "";  	}		function mostraLink()	{  if(numAutores == 1)  { 	 campodiv = document.getElementById("removeAutor"); 	 campodiv.innerHTML = "<a href='javascript:criaNovoAutor();'>Novo autor</a>";  }	}</script>

 

 

Uma coisa importante é que a área onde os campos serão inseridos tem que ser dentro de um div

 

<DIV id="novoAutor">	Autor 1:        <INPUT NAME="txtAutor[]" TYPE="TEXT" ID="autor1" VALUE="" SIZE="50" MAXLENGTH="50"></DIV>

E aonde vai inserir o link também:

 

<div id="removeAutor"></div>

 

Espero que ajude alguém ;-)

[Mário Monteiro 179]

Cara valew, quando tiver tempo vou testar, mas já vi que vai ficar mais "saudavel" do que o que fiz que limita a um valor que determino no inicio.

[Mário Monteiro 179]

cara o que precisa colocar ho html pra funcionar isso???

[olimpia 0]

fiz um exemplo parecido com esteTenho uma div e dentro deste uma table, sendo que cada linha desta table contem uma select com 3 opçõesQuando a removo uma linha desta tabela, monto a tabela novamente, ou seja, fico em loop capturando o valor de cada linha atraves do innerHtml Esta funcionando perfeito, so esta ocorrendo um pequeno problemaVamos dizer que quero remover a priemeira linha da tabela, e que na segunda linha a select este selecionada com a sua segunda opçãoAo clicar no botão excluir a primeira linha é excluida, e a segunda passa a ser a primeira, mas o valor da select volta para a primeira opçãoTestei em no Mozila 1.6, no Netscape 7.0 , no Opera 7.2 e no IE 6.0no IE a opção selecionda da select continua, mas nos outros browser a opção vlta para o primeiro valorAlguem sabe como posso resolver isto?

[hinom 5]

não é correto fazer dessa forma usando o innerHTML

 

eu precisei disso há uns 3 anos atrás e encontrei num documentação que o javascript tem função específica para isso. O createElement()

 

 

<html>

<head>

<title>JavaScript - ADD INPUT TEXT</title>

<script language=javascript>

function addInput(Name, Value, Parent){

//alert(Parent);

 

var oInput = document.createElement("input");

  oInput.setAttribute("name", Name);

  oInput.setAttribute("type ", "text");

  oInput.setAttribute("value ", Value); 

  oInput.setAttribute("size ", 20);

  return Parent.appendChild(oInput);

}

</script>

<body>

<form name="form1">

<input type=text name=teste size=20>

</form>

<input type=button value=adicionar onclick="addInput('nome_campo', 'valor do campo', document.form1);">

</body>

</html>

 

esse script é velho.

peguei aqui do fundo do baú

só dar uma arrumada e beleza

[olimpia 0]

Preciso criar este elemento dentro de uma table que esta dentro de um divOu seja, tenho que criar uma nova linha com uma nova coluna na table e cria o elementoNão consegui fazer.....Tem alguma dica?