Criar e Excluir inputs dinamicamente 30.05.16 8:56
Muito útil quando não se sabe a quantidade de caixas de textos que vai utilizar.
Como posso recuperar os valores dos campos para passar para uma página PHP ?
E no arquivo teste.php
Créditos:
Victor cometti
- Código:
<script>
var numero = 0;
//add caixa de texto
function add_text(){
//pega a div
var DivText = document.getElementById('text');
//cria uma nova div
var DivNovaText = document.createElement('div');
//altera o nome da div
DivNovaText.setAttribute("id","DivText"+numero);
//coloca no innerHTML da nova div o código html necessário
DivNovaText.innerHTML = '<input type=text id=t['+numero+']><input type=button value=Excluir onclick=deltext(\'DivText'+numero+'\')>';
//adiciona a nova div como filha da divtext
DivText.appendChild(DivNovaText);
//coloca o cursor na text criada
document.getElementById('t['+numero+']').focus();
//incrementa
numero++;
}
//exclui caixa de texto
function deltext(div){
var d = document.getElementById('text');
var olddiv = document.getElementById(div);
//remove a div
d.removeChild(olddiv);
}
window.onload = function(){
add_text();//cria um campo inicialmente
document.getElementById('add').onclick = function(){//quando clicar no botão
add_text();//cria com click do botão
}
}
</script>
<div id='text'></div>
<input type="button" value='Add' id='add'>
Como posso recuperar os valores dos campos para passar para uma página PHP ?
- Código:
<script>
var numero = 0;
//add caixa de texto
function add_text(){
//pega a div
var DivText = document.getElementById('text');
//cria uma nova div
var DivNovaText = document.createElement('div');
//altera o nome da div
DivNovaText.setAttribute("id","DivText"+numero);
//coloca no innerHTML da nova div o código html necessário
DivNovaText.innerHTML = '<input type=text id=t['+numero+'] name=t['+numero+']><input type=button value=Excluir onclick=deltext(\'DivText'+numero+'\')>';
//adiciona a nova div como filha da divtext
DivText.appendChild(DivNovaText);
//coloca o cursor na text criada
document.getElementById('t['+numero+']').focus();
//incrementa
numero++;
}
//exclui caixa de texto
function deltext(div){
var d = document.getElementById('text');
var olddiv = document.getElementById(div);
//remove a div
d.removeChild(olddiv);
}
window.onload = function(){
add_text();//cria um campo inicialmente
document.getElementById('add').onclick = function(){//quando clicar no botão
add_text();//cria com click do botão
}
}
</script>
<form action='teste.php' method='post'>
<div id='text'></div>
<input type="button" value='Add' id='add'>
<input type='submit' value='enviar'>
</form>
E no arquivo teste.php
- Código:
<?php
echo "Nomes:";
foreach ($_POST['t'] as $item)
echo $item.",";
?>
Créditos:
Victor cometti