Ir para conteúdo

Arquivado

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

PauloRJ

Adicionar linhas ao cadastro...

Por , em Javascript

Recommended Posts

PauloRJ    4

PauloRJ
Postado

Fala povo, gostaria de algum tutorial e/ou exemplo.

 

Tenho um cadastro de usuarios no qual tem dependentes.

e gostaria de um botao MAIS UM no qual o mesmo incluia + uma linha na pagina de cadastro

 

 

se tem 2 linhas e quero + 1 dependente clika no botao + 1 e aparece + uma linha para cadastro.

 

-> Tipo o mysql quando estamos estruturando uma tabela e tem a opção de incluir mais uma linha.

 

Imagem Postada

 

e ao terminar seria uma pagina de validação para pegar os dados do usuario MASTER (responsavel) e seus dependentes e cadastrar no banco, no qual os dependentes terao o id do usuario master.

 

2 tabelas

 

Usuarios Master com auto incremente e outra tabela DEPENDENTES que terao id do usuario master sem auto increment.

 

 

é isso!

 

Alguma ideia?

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Olá amigo!

Existem várias maneiras de fazer o que você está pedindo. Fiz um código bem simples para você ter uma idéia de como fazer...

Fiz uma validação do formulário em php também. Espero que te ajude... Aí vai o código.

 

<?php	if($_POST["numero"]) {		$numero = $_POST["numero"];		for ($i = 1; $i <= $numero; $i++) {			$dependente = "dependente$i";			echo "Dependente $i: ".$_POST[$dependente]."<br>";		}	}?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Dependentes</title><script>	function adiciona() {		var numero = document.getElementById("numero").value; // Pega a quantidade atual de dependentes		var dependentes = document.getElementById("dependentes");		numero = parseInt(numero); // Transforma em numérico o valor		numero += 1; // Adiciona o contador de dependentes		document.getElementById("numero").value = numero; // Guarda o valor		var campo = 'Dependente ' +  numero + ': <input name="dependente' + numero + '" type="text" id="dependente' + numero + '"><br>'; // Define campo		dependentes.innerHTML += campo; // Acrescenta campo	}</script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><form action="dependentes.php" method="post" name="formulario" id="formulario">  <input type="button" name="Submit" value="Adicionar dependentes" onClick="adiciona();">	<input name="numero" type="hidden" id="numero" value="0">  <div id="dependentes"></div>  <input type="submit"></form></body></html>

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

valeu benck, vou estudar seu codigo e torno a postar + tarde. Grande abraço

 

se surgir novas ideias tamvbem estou aceitando. Trabalhar com cliente é complicado, sempre quer algo diferente.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

Show! Como eu estava imaginando, mas tenho um novo problema.Eu adiciono as linhas perfeitamente, mas como eu por exemplo:como faria para ter um botao de apagar determinada linha, eu adiciono 6 dependentes e por algum motivo quero excluir uma linha, como seria??? Um botao de excluir ao lado de cada linha, para apagar a linha determinada.Dependente Linha 1 - Apagar LinhaDependente Linha 2 - Apagar LinhaDependente Linha 3 - Apagar LinhaDependente Linha 4 - Apagar LinhaDependente Linha 5 - Apagar LinhaDependente Linha 6 - Apagar LinhaValeu a força !

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

SHOW!! Perfeitamente oq desejava, agora ou estudar para poder inserir no banco, dúvidas vou postando.

 

vou postar aqui o codigo correto pois percebi um erro e solucionei.

 

 

<html><head><title>exemplo1</title><script type="text/javascript"><!--var mainDivName = 'eventDates';function addEvent(){var ni = document.getElementById(mainDivName);var numi = document.getElementById('theValue');var num = (document.getElementById("theValue").value -1)+ 2;numi.value = num;var divIdName = "eventDate"+num+"Div";var newdiv = document.createElement('div');newdiv.setAttribute("id",divIdName);newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"text\" name=\"q1\" size=\"7\"></td><td><input type=\"text\" name=\"a1\" size=\"7\"></td><td><input type=\"text\" name=\"p1\" size=\"7\"></td><td><input type=\"text\" name=\"pt1\" size=\"7\"></td></tr></table>Linha "+num+" adicionada! <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";ni.appendChild(newdiv);}function removeEvent(divNum){var d = document.getElementById(mainDivName);var olddiv = document.getElementById(divNum);d.removeChild(olddiv);}//--></script></head><body><form>	<input type="hidden" value="0" id="theValue" />	<p><a href="#.php" onClick="addEvent();">Adicionar Linhas</a></p>			<div id="eventDates"> </div></form></body></html>

antes

<p><a href="java script:;" onClick="addEvent();">Adicionar Linhas</a></p>

correto p/ funcionar:

<p><a href="#" onClick="addEvent();">Adicionar Linhas</a></p>

torno a postar quando conseguir estruturar o codigo para validar e inserir no banco

 

Abraço e valeu a ajuda!

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

Estou tendo problemas de como resgatar os dados(campos) na pagina de validação.

Como seria o processo para resgatar as informações dos campos ja que eu nao sei a quantidade de dependetes que será adicionado pelo cliente.

 

 

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

 

 

Sou "leigo" em java fica complicado.

 

Aguardo a ajuda de você.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

As duas maneiras do link "Adicionar Linhas" funcionam. O primeiro não funcionou, provavelmente, porque ao copiar e colar o script no seu editor, o "javascript" ficou separado. Mas unindo o "java" com o "script", funcionará. ;)

 

A validação é feita com uma linguagem dinâmica? Se sim, deixe os nomes dos campos como array. Exemplo:

newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"text\" name=\"q1\" size=\"7\"></td><td><input type=\"text\" name=\"a1\" size=\"7\"></td><td><input type=\"text\" name=\"dependentes[]\" size=\"7\"></td><td><input type=\"text\" name=\"pt1\" size=\"7\"></td></tr></table>Linha "+num+" adicionada! <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";

Depois para recuperar as informações desses novos campos, é só usar um foreach, do PHP. É como recuperar informações de checkbox.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

Opa!

 

Valeu a dica.

 

e o seguinte consegui capturar os campos na segunda pagina

 

mas gostaria de saber se é essa a forma correta, pois so consegui fazendo um foreach para cada input da seguinte maneira:

 

 

Como funciona ou a minha ideia e/ou solução que encontrei.

 

1) Com os dados do GESTOR, faz INSERT na tabela GESTOR que tem auto_increment

2) Será feita uma consulta na tabela GESTOR no qual os dados serao iaguais ao INSERT recem feito (NO CASO AGORA Eu forneci direto o $idpai

3) Com esse $idpai o primeiro campo de dependentes no caso q1 é inserido na tabela de dependentes

INSERE o primeiro campo no campo referente a ele e insere o $idpai no campo id que é a conexao entre as tabelas que é o id dos depentendes no qual eu relaciono os dependentes com o seu gestor.

 

//Nao consegui pegar todos os campos em um unico array e muito menos exibi-los. Dificil pra mim.

4) Os campos restantes sao inseridos na tabela por UPDATE com WHERE id = $idpai

 

 

Em si ficou confuso porem funciona. Caso tenha como resgatar todos os $_POST em um unico foreach favor me ensinar/mostrar como echo os mesmos, ok!?

 

grande abraço e valeu + uma vez a atenção. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

página add.php

<html><head><title>exemplo1</title><script type="text/javascript"><!--var mainDivName = 'eventDates';function addEvent(){var ni = document.getElementById(mainDivName);var numi = document.getElementById('theValue');var num = (document.getElementById("theValue").value -1)+ 2;numi.value = num;var divIdName = "eventDate"+num+"Div";var newdiv = document.createElement('div');newdiv.setAttribute("id",divIdName);newdiv.innerHTML = "<table><tr><td></td><td width=80><input type=\"text\" name=\"q1[]\" size=\"7\"></td><td><input type=\"text\" name=\"a1[]\" size=\"7\"></td><td><input type=\"text\" name=\"p1[]\" size=\"7\"></td><td><input type=\"text\" name=\"pt1[]\" size=\"7\"></td></tr></table>Linha "+num+" adicionada! <a href=\"#\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remover linha</a>";ni.appendChild(newdiv);}function removeEvent(divNum){var d = document.getElementById(mainDivName);var olddiv = document.getElementById(divNum);d.removeChild(olddiv);}//--></script></head><body><form action="add2.php" method="post" name="add" >	<input type="hidden" value="0" id="theValue" />	<table width="300" border="1" cellspacing="0" cellpadding="0">  <tr>	<td colspan="4"><div align="center">Alteração Orçamentária </div></td>  </tr>  <tr>	<td><input type="text" name="pai1" size="7"></td>	<td><input type="text" name="pai2" size="7"></td>	<td><input type="text" name="pai3" size="7"></td>	<td><input type="text" name="pai4" size="7"></td>  </tr></table>		<p><a href="java script:;" onClick="addEvent();">Adicionar Linhas</a></p>	<tr align="right"><td colspan="2"><input type="submit" value="Enviar"></td></tr>	<div id="eventDates"> </div></form></body></html>

 

pagina add2.php

 

<?php$pai1 = $_POST['pai1'];$pai2 = $_POST['pai2'];$pai3 = $_POST['pai3'];$pai4 = $_POST['pai4'];echo $_POST['pai1'] . "<br>";echo $_POST['pai2'] . "<br>";echo $_POST['pai3'] . "<br>";echo $_POST['pai4'] . "<br>";$idpai = "57";$sql2 = "INSERT into gestor (pai1, pai2, pai3, pai4) VALUES ('$pai1', '$pai2', '$pai3', '$pai4')"; echo $sql2 . "<br>";foreach ($_POST["q1"] as $q1) 	{$sql3 = "INSERT into dependentes (idpai, q1) VALUES ('$idpai', $q1')";echo $sql3 . "<br>"; 	}foreach ($_POST["a1"] as $a1) 	{$sql4 = "UPDATE dependentes SET a1 = '$a1' WHERE id = '$idpai'";echo $sql4 . "<br>"; 	}		foreach ($_POST["p1"] as $p1) 	{$sql5 = "UPDATE dependentes SET p1 = '$p1' WHERE id = '$idpai'";echo $sql5 . "<br>"; 	}		foreach ($_POST["pt1"] as $pt1) 	{$sql6 = "UPDATE dependentes SET pt1 = '$pt1' WHERE id = '$idpai'";echo $sql6 . "<br>"; 	}?>

é isso!

Compartilhar este post

Link para o post
Compartilhar em outros sites

edu_mg77    0

edu_mg77
Postado

alguem sabe se tem como restringir a criação para apenas 3 "div" ???

var mainDivName = 'eventDates';function addEvent(){var ni = document.getElementById(mainDivName);var numi = document.getElementById('theValue');var num = (document.getElementById("theValue").value -1)+2;numi.value = num;var divIdName = "eventDate"+num+"Div";var newdiv = document.createElement('div');newdiv.setAttribute("id",divIdName);

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

Tempo após a criação do tópico mas surgiu uma nova oportunidade de usar o codigo. Eu melhorei e pode vir a ajudar próximos usuários que visitarem o tópico, segue o código;

 

 

index.php

 

<script type="text/javascript">

var mainDivName = 'testando';

function addEvent2()
{
var ni = document.getElementById(mainDivName);

var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;

var divIdName = "testando"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);

newdiv.innerHTML = "<table><tr><td width=80><td><span>Tipo</span><input type=\"text\" name=\"tipo[]\" class=\"title\" id=\"demo-local3\ size=\"7\" /></td><td><span>Referência</span><input type=\"text\" name=\"referencia[]\" class=\"title\" id=\"demo-local3\ size=\"7\" /></td><td><span>Data Instalação</span><input type=\"text\" name=\"data_instalacao[]\" class=\"title\" id=\"demo-local3\ size=\"7\" /></td></td><td>Linha "+num+" adicionada! <a href=\"#\" onclick=\"removeEvent2(\'"+divIdName+"\')\">Remover linha</a></td></tr></table>";


ni.appendChild(newdiv);
}

function removeEvent2(divNum)
{
var d = document.getElementById(mainDivName);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</script>




<form action="resultado.php" method="post" id="form-demo">
<legend>Bairro</legend>
<input type="text" name="bairro" class="title" id="demo-local" />

<label>
<span>Localização / Ruas</span>
<input type="text" name="localizacao" class="title" id="demo-local2" />
</label>
		
<label>
<input type="hidden" value="0" id="theValue" />

<table cellpadding="0" cellspacing="0" border="1">
		<tr>
			<td><a href="#" onClick="addEvent2();">Adicionar Linha</a></td>
		</tr>

		<tr>
		   <td><div id="testando"></div></td>		  
		</tr> 

		<tr>
			  <td><input type="submit" value="Enviar"></td>
		</tr>
 
		</table>
		</label>
	 
</form>

 

 

resultado.php

<?php
$bairro 		= $_POST['bairro'];
$localizacao 	= $_POST['localizacao'];

$total = count($_POST["referencia"]); //Pega o total de linhas para efetuar o Loop
//echo 'Total: '.$total.'<br><br>';

$tipo				= $_POST['tipo'];
$referencia 		= $_POST['referencia'];
$data_instalacao 	= $_POST['data_instalacao'];

for($i=0;$i<$total;$i++)
{

$sql = "INSERT INTO tabela (bairro, localizacao, tipo, referencia, data) VALUES ('$bairro', '$localizacao', '$tipo[$i]', '$referencia[$i]', '$data_instalacao[$i]')";

//echo 'Sql: '.$sql.'<br>';

}

echo '<br<br><a href="test.php">Index</a><br><br>';
?>

 

sendo que o POST bairro e localizacao não pego o Loop por serem informações de referencia do cadastro

Duvidas so postar ou mandar mensagem.

 

 

Forte abraço!

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