Adicionando 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:

Formulário html:

		
	
	
	
	
	

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 que irá ler os inputs - '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" } }





Comentários

Copyright © 2018 Anderson Bravo
www.andersonbravo.com.br
anderson@andersonbravo.com.br