ThuG - LovE ThuG - LovE  • 30.05.16 8:56

Criar e Excluir inputs dinamicamente Empty 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.
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
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.