Ir para conteúdo

POWERED BY:

Arquivado

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

Lucas Tomasi

inserir dados por input dinâmico

Por , em Javascript

Recommended Posts

Lucas Tomasi    0

Lucas Tomasi
Postado

Olá,

Preciso de um script que tenha um botão, no qual a cada vez que for apertado adiciona um input a página. E que depois todos os valores do input gerados sejam adicionados no mysql.

Por ser um total leigo em javascript, peguei um script pronto que adiciona um input. Segue abaixo:

<html>  
<head> 

<script type="text/javascript">
var id = 1;
function novoCampo(){
var inp = document.createElement("input");
inp.setAttribute("id", id );
var lab = document.createElement("label");
lab.setAttribute("id", "l"+id);
var lab_content = document.createTextNode("Campo de Texto " + id + " ");
var quebra = document.createElement("br");
lab.appendChild(lab_content);
var inpP = document.getElementById(id-1);
var parentInp = inpP.parentNode;
parentInp.insertBefore(lab, inpP.nextSibling);
parentInp.insertBefore(inp, lab.nextSibling);
parentInp.insertBefore(quebra, lab);
++id;
}
</script>
 
</head>  
  
<body>  
 
<form name="form1" method="post" action="">
<label id="l0">Campo de Texto 0</label>
<input type="text" name="textfield" id="0"><br />
<input type="submit" name="Submit" value="+ 1 Campo" onClick="novoCampo();return false;">
</form>
  
</body>  
</html>

Minha dúvida é como eu faço pra inserir todos os valores de todos os inputs que foram gerados no banco de dados mysql?

 

Desde já,

Obrigado pela sua atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

LeonardoAP    0

LeonardoAP
Postado

opa,

 

Veja que nesse código javascript, ele cria um input com apenas o id como atributo

var inp = document.createElement("input");
inp.setAttribute("id", id );

Para pegar o valor do campo com php, usa-se o atributo name, que pode ser adicionado dessa forma:

inp.setAttribute("name", aquiEntraUmNomeProInput );

Agora sim, o input tem um name. O que voce precisa é saber qual o name de todos os inputs que o usuário criar, para isso, sugiro voce entrar em uma convenção de nomes.

 

Assuma que o nome de todos os inputs será formInput + id

Crie um campo hidden para manter uma contagem de todos os inputs que forem adicionados.

 

Agora ok, voce tem um name para todos os inputs e sabe exatamente quantos inputs foram adicionados.

no php, basta fazer um for para rodar pelo numero de inputs adicionados e ir pegando o valor dos inputs dinamicamente.

 

Código completo:

<?php
	if(isset($_REQUEST['enviarDados'])){
		$inputsCount = $_POST['inputsCount'];
		
		for($x = 1; $x <= $inputsCount; $x++){
			echo $_POST['formInput'.$x];
			echo "<br/>";
		}
		echo "<hr/>";
	}
?>

<html> 
<head>

<script type="text/javascript">
var id = 1;
function novoCampo(){
	var inp = document.createElement("input");
	inp.setAttribute("id", id );
	inp.setAttribute("name", "formInput"+id );
	
	var lab = document.createElement("label");
	lab.setAttribute("id", "l"+id);	

	var lab_content = document.createTextNode("Campo de Texto " + id + " ");
	
	var quebra = document.createElement("br");
	lab.appendChild(lab_content);
	
	var inpP = document.getElementById(id-1);
	var parentInp = inpP.parentNode;
	
	
	parentInp.insertBefore(lab, inpP.nextSibling);
	parentInp.insertBefore(inp, lab.nextSibling);
	parentInp.insertBefore(quebra, lab);
	
	document.getElementById('0').value = id;	
	++id;	
}
</script>

</head>  
  
<body>  

<form name="form1" method="post" action="?enviarDados">
	<input type="hidden" name="inputsCount" id="0" value="0">
	<br/>
	<input type="button" value="+ 1 Campo" onClick="novoCampo();">
	<br/>
	<br/>
	<input type="submit" value="Enviar">
</form>
  
</body>  
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

anticHxCx    0

anticHxCx
Postado

Boa noite Lucas, beleza?

 

Acredito que a opção mais fácil no seu caso é criar um campo <input type='hidden' ... que armazena a quantidade de input texts criados. Assim ao receber o formulário você sabe qual a quantidade de input's criados, onde o inicio é 0 e o fim (input hidden).

 

Altere o nome do " <input type="text" name="textfield" id="0"> " para name="textfield[]", no qual se tornará um vetor.

 

Após é só receber os dados:

if($_SERVER['REQUEST_METHOD'] == "POST")
{
	// Recebendo texts
	if(!empty($_POST['textfield']))
		$textfield = $_POST['textfield'];

		$hidden = $_POST['hidden'];	
	echo($textfield[0]."<br>");
		....

E claro, fazer um for para varrer o Array ;)

for($i=0; $i <= $hidden; $i++)
{
	 ...

 

Segue meu código: (deixarei em Quote para poder grifar as alterações de código.

<?php

if($_SERVER['REQUEST_METHOD'] == "GET")

{

$html = "

<form name='form1' method='post' action='ajuda.php'>

<label id='l0'>Campo de Texto 0</label>

<input type='text' name='textfield[]' id='0'><br />

<input type='button' name='Submit' value='+ 1 Campo' onClick=\"novoCampo();return false;\">

<input type='hidden' name='hidden' id='hidden' />

<input type='submit' value='Enviar'/>

</form>";

}

elseif($_SERVER['REQUEST_METHOD'] == "POST")

{

$html = "";

// Recebendo hidden

$hidden = intval($_POST['hidden']);

 

// Recebendo texts

if(!empty($_POST['textfield']))

{

for($i = 0; $i <= $hidden; $i++)

{

$html .= $_POST['textfield'][$i];

}

}

}

?>

 

<html>

<head>

<script type="text/javascript">

var id = 1;

function novoCampo(){

// Armazenando no hidden a quantidade de input's gerados.

document.getElementById('hidden').value = id;

// Criando novo Text

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

inp.setAttribute("id", id );

var lab = document.createElement("label");

lab.setAttribute("id", "l"+id);

var lab_content = document.createTextNode("Campo de Texto " + id + " ");

var quebra = document.createElement("br");

lab.appendChild(lab_content);

var inpP = document.getElementById(id-1);

var parentInp = inpP.parentNode;

parentInp.insertBefore(lab, inpP.nextSibling);

parentInp.insertBefore(inp, lab.nextSibling);

parentInp.insertBefore(quebra, lab);

++id;

}

</script>

</head>

<body>

<?=$html?>

</body>

</html>

 

 

Espero ter ajudado ;)

 

Falou!!!

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