Tecnologia

Adicionar novos inputs em tempo real

A opção de adicionar novos inputs é muito útil quando estamos anexando arquivos, por exemplo.

Ao invés de criar uma página com 50 inputs, colocamos apenas alguns e no final colocamos um botão para adicionar mais, se necessário.


Exemplo: Clique aqui para adicionar



Formulário html:

		
<input type="button" name="AddEdit" value=" Adicionar " onClick="add();">

<form method="post" action="le_inputs.php">			
	<table id="table_inputs">
	</table>
	<input type="submit" name="Enviar" value="Enviar">		
</form>

Função javascript para adicionar novos inputs:


function add() {
	var Tbl = document.getElementById("table_inputs");
	var Pos = Tbl.rows.length;
	var NewRow = Tbl.insertRow(Pos);
	var NewCel = NewRow.insertCell(0);

	var obj = document.createElement("input");
	obj.type = "text"; // file, etc
	obj.width = 100;
	obj.id = "xxx_" + Tbl.rows.length;
	obj.name = "texto[]";
		
	NewCel.appendChild(obj);
}	

PHP para onde vai o submit - 'le_inputs.php':


if ($_POST["Enviar"]) {
	
	$countInputs = count($_POST["texto"]);
	
	if ($countInputs > 0) {
		// para exemplo vamos apenas imprimir na tela os valores preenchidos nos inputs
		for ($i = 0; $i < $countInputs; $i++)
			echo $_POST["texto"][$i] . "
"; } else { echo "nenhum item para ser exibido" } }
2020 © B85 Tecnologia
eu@andersonbravo.com.br