Ir para conteúdo

POWERED BY:

Arquivado

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

hwoa

Adicionar campos de formulario

Por , em Javascript

Recommended Posts

hwoa    0

hwoa
Postado

Vou tentar ser bem claro em minha duvida.

 

 

Tenho uma tabela no BD de cadastros----

-----Nome

-----Sobrenome

 

E no formulario o Nome e Sobrenome para cadastrar no BD.

 

quero colocar uma opção em baixo, de adicionar pessoas.

quando clicar la, aparece o mesmo formulario denovo para cadastrar as 2 pessoas no BD.

 

___________ ________________

|___Nome___| |___Sobrenome___|

Adicionar + pessoa

 

Quando clicar em + pessoas.

___________ ________________

|___Nome___| |___Sobrenome___|

___________ ________________

|___Nome___| |___Sobrenome___|

Adicionar + pessoa

e assim por diante, e conseguir cadastrar todas as pessoas que foram colocadas

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alaerte Gabriel    662

Alaerte Gabriel
Postado

Vou mover pra área de JavaScript, pois eu não manjo muito, to estudando ainda e eu esqueci o que utiliza pra fazer isso.

 

Movido: PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

Po, maneiro esse problema, é legal de se fazer isso.

 

Assim, eu faria da seguinte forma, eu padronizaria o nome e id's dos campos com um numero no final, assim sempre q eu clicasse no link, eu pegaria o id do ultimo filho , resgatava o numero final com substring, criaria os 2 campos e adicionaria no formulário com o numero final incrementando +1, assim teria um formulário da seguinte forma:

 

___________ ________________

|___Nome0___| |___Sobrenome0___|

____________ ________________

|___Nome1___| |___Sobrenome1___|

+ adicionar contato

 

 

e estruturaria assim:

 

<div id="campos">
  <p> <input name="nome0" type="text" id="nome0"> - <input name="sobrenome0" type="text" id="sobrenome0"> </p>
</div>
<a href="java script:adicionaCampo();">+adicionar campo </a>

Com DOM(javascript) , você consegue pegar o elemento div pelo id, e com o elemento você sabe tudo que tem dentro dele, com isso da pra fazer um monte de coisas como : remover, adiconar, mudar atributos e tals. É claro q eu num vo postar códigos aqui, pq eu num tenho como desenvolver por falta de tempo, mas posso te dar umas dicas.

 

Procure uma referencia sobre "DOM" em javascript, ensinando como funciona esquema de arvoriamento,como criar elemento.

 

Tenho uma referencia mt boa aqui, só q está em inglês.

 

referencia de javascript

 

 

Espero ter ajudado.

 

Absss

Compartilhar este post

Link para o post
Compartilhar em outros sites

hwoa    0

hwoa
Postado

Ajudou sim Carutcho, já estou dando uma estudada.

 

 

Meu amigo me mandou um codigo, que ele extraiu de uma pagina... mais não consegui intender a lógica.

 

segue ele

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="JavaScript">
<!---
blnEnviado = false;
function validar() {


  for (x = 0; x < intContDescriptions; x++) {
	if (x == 0 || eval("f.descricao_codigo_" + x + ".value") || eval("f.descricao_quantidade_" + x + ".value") || eval("f.descricao_texto_" + x + ".value")) {
	  if (!eval("f.descricao_codigo_" + x + ".value")) vazio += "- Problema " + (x+1) + " - Código\n";
	  if (!eval("f.descricao_quantidade_" + x + ".value")) vazio += "- Problema " + (x+1) + " - Quantidade\n";
	  if (!eval("f.descricao_opcao_" + x + "[0].checked") && !eval("f.descricao_opcao_" + x + "[1].checked") && !eval("f.descricao_opcao_" + x + "[2].checked")) vazio += "- Problema " + (x+1) + " - Tipo\n";
	  if (eval("f.descricao_opcao_" + x + "[2].checked") && !eval("f.descricao_texto_" + x + ".value")) vazio += "- Problema " + (x+1) + " - Descrição\n";
	}
  }


  return false;
}


intContDescriptions = 0;

function addDescription() {
	
	if (intContDescriptions == 5) {
		return;
	}
	
	trOpcao = document.getElementById("trDescricaoOpcao").cloneNode(true);
	trCodigo = document.getElementById("trDescricaoCodigo").cloneNode(true);
	trTexto = document.getElementById("trDescricaoTexto").cloneNode(true);

	trOpcao.id += "_" + intContDescriptions;	
	trCodigo.id += "_" + intContDescriptions;	
	trTexto.id += "_" + intContDescriptions;
		
	trOpcao.style.display = "";
	trCodigo.style.display = "";
	trTexto.style.display = "";
	
	for (x = 0; x < trOpcao.childNodes.length; x++) {
		if (trOpcao.childNodes[x].nodeName == "TD") {
			var objRadio1 = document.createElement('<input type="radio" name="descricao_opcao_' + intContDescriptions + '" onClick="habilitarDescricaoTexto(this, true);">');
			objRadio1.value = "1";
			var objRadio2 = document.createElement('<input type="radio" name="descricao_opcao_' + intContDescriptions + '" onClick="habilitarDescricaoTexto(this, true);">');
			objRadio2.value = "2";
			var objRadio3 = document.createElement('<input type="radio" name="descricao_opcao_' + intContDescriptions + '" onClick="habilitarDescricaoTexto(this, false);">');
			objRadio3.value = "3";
			for (y = 0; y < trOpcao.childNodes[x].childNodes.length; y++) {
				if (trOpcao.childNodes[x].childNodes[y].nodeName == "DIV") {
					if (trOpcao.childNodes[x].childNodes[y].id == "divContador") {
						trOpcao.childNodes[x].childNodes[y].id += "_" + intContDescriptions;
						trOpcao.childNodes[x].childNodes[y].innerHTML = "  Problema " + (intContDescriptions+1);
					} else if (trOpcao.childNodes[x].childNodes[y].id == "divRadioOpcao1") {
						trOpcao.childNodes[x].childNodes[y].appendChild(objRadio1);
					} else if (trOpcao.childNodes[x].childNodes[y].id == "divRadioOpcao2") {
						trOpcao.childNodes[x].childNodes[y].appendChild(objRadio2);
					} else if (trOpcao.childNodes[x].childNodes[y].id == "divRadioOpcao3") {
						trOpcao.childNodes[x].childNodes[y].appendChild(objRadio3);
					}
				}
			}
		}
	}
	
	for (x = 0; x < trCodigo.childNodes.length; x++) {
		if (trCodigo.childNodes[x].nodeName == "TD") {
			for (y = 0; y < trCodigo.childNodes[x].childNodes.length; y++) {
				if (trCodigo.childNodes[x].childNodes[y].nodeName == "INPUT") {
					trCodigo.childNodes[x].childNodes[y].name += "_" + intContDescriptions;
					trCodigo.childNodes[x].childNodes[y].id = trCodigo.childNodes[x].childNodes[y].name;
				}
			}
		}
	}
	
	for (x = 0; x < trTexto.childNodes.length; x++) {
		if (trTexto.childNodes[x].nodeName == "TD") {
			for (y = 0; y < trTexto.childNodes[x].childNodes.length; y++) {
				if (trTexto.childNodes[x].childNodes[y].nodeName == "INPUT") {
					trTexto.childNodes[x].childNodes[y].name += "_" + intContDescriptions;
					trTexto.childNodes[x].childNodes[y].id = trTexto.childNodes[x].childNodes[y].name;
				}
			}
		}
	}
	
	document.getElementById("trDescricaoCodigo").parentNode.insertBefore(trOpcao, document.getElementById("trDescricaoCodigo"));
	document.getElementById("trDescricaoCodigo").parentNode.insertBefore(trCodigo, document.getElementById("trDescricaoCodigo"));
	document.getElementById("trDescricaoCodigo").parentNode.insertBefore(trTexto, document.getElementById("trDescricaoCodigo"));
	
	f.count_problemas.value = ++intContDescriptions;
	
}

function habilitarDescricaoTexto(IN_objRadio, IN_blnFlag) {
	document.getElementById("descricao_texto_" + IN_objRadio.name.split("_")[2]).disabled = IN_blnFlag;
	if (IN_blnFlag) {
		document.getElementById("descricao_texto_" + IN_objRadio.name.split("_")[2]).value = "";
	}
}



//-->
</script>


<body>

 <tr> 
	<td  bgcolor="#FFFFFF" align="center" valign="top"> <font size="3" face="Verdana, Arial, Helvetica, sans-serif" color="#336633"><b><font size="3" face="Verdana, Arial, Helvetica, sans-serif" color="#336633"><b><font face="Verdana, Arial, Helvetica, sans-serif"><b><font size="4" color="#006633" face="Arial, Helvetica, sans-serif"><span class="texto_corpo"><b></b></span></font></b></font></b></font></b></font>
		  <table width="550" border="0" cellspacing="2" cellpadding="2" align="center">
			<input type="hidden" name="revendedor_pais_id" value="101">
			<input type="hidden" name="proprietario_pais_id" value="101">
			<tr align="center" id="trDescricaoOpcao" style="display: none"> 
			  <td height="23" colspan="4"> </td>
			</tr>
			<tr align="center" id="trDescricaoCodigo" style="display: none"> 
			  <td height="30" align="right"> <font color="#006633" size="2" face="Arial, Helvetica, sans-serif"><b>NOME</b></font>			  </td>
			  <td width="130" height="30" align="left"> <font color="#006633" size="2" face="Arial, Helvetica, sans-serif"><b> </b></font> 
				<input type="text" name="nome" size="10" maxlength="50">			  </td>
			  <td width="120" height="30">Sobrenome</td>
			  <td width="130" height="30" align="left"> <font size="2" face="Arial, Helvetica, sans-serif"><b><font color="#006600"> </font></b></font> 
				<input type="text" name="sobre" size="10" maxlength="20">			  </td>
			</tr>
			<tr align="center" id="trDescricaoTexto" style="display: none"> 
			</tr>
			<tr> 
			  <td colspan="4" align="center"><font color="#006633" size="2" face="Arial, Helvetica, sans-serif"><a href="java script:void(0)" onClick="addDescription()">adicionar</a></td>
			</tr>
		  </table>	</td>
  </tr>
  
  <script language="JavaScript" type="text/javascript">
<!--
addDescription();
//-->
</script>
</body>
</html>

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