1

Galera tenho um formulário simples com 3 input. Preciso informar uma quantidade no input 'qtd', e com isso preciso que o jQuery multiplique a tabela com o formulário, e mudando o 'name'.

Exemplo;

Se eu informar 3 no input 'qtd' vai aparecer 3 tabelas com os seguinte input: 'nome1','nome2','nome3','sexo1','sexo2','sexo3'.

Alguém sabe como posso fazer isso?

<input type='text' class='form_campos' name='qtd'>

<table>
  <tr>
    <td>
      <input type='text' class='form_campos' name='nome1'>
    </td>
    <td>
      <input type='text' class='form_campos' name='sexo1'>
    </td>
  </tr>
</table>

2 Respostas 2

2

Creio ser isto que quer:

$('input[name="qtd"]').on('keyup click', function(){
  var qtd = $(this).val();
  $('#inputs table').remove();
  if(qtd > 0) {
      var appending = '<table>';
      for(var i = 1; i <= qtd; i++) {
         appending += '<tr>\
                         <td>nome' +i+ ': \
                             <input type="text" class="form_campos" name="nome' +i+ '" placeholder="nome' +i+ '">\
                         </td>\
                         <td>sexo' +i+ ': \
                             <input type="text" class="form_campos" name="sexo' +i+ '" placeholder="sexo' +i+ '">\
                         </td>\
                       </tr>';
      }
      appending += '</table>';
      $('#inputs').append(appending);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputs">
  <input type="number" class='form_campos' name='qtd' min='0'>
</div>

6
  • muito legal, é isso mesmo, mas teria como ele funcionar sem a necessidade de ter que clicar no botão enter? Ou seja, assim que eu alterar o valor ele ja monta o formulário Commented 30/06/2016 às 11:54
  • Assim não tem @HugoBorges. está no evento keyup/click. Mudei o input para ser number
    – Miguel
    Commented 30/06/2016 às 11:57
  • era isso mesmo que eu quero, muito obrigado ;) Commented 30/06/2016 às 11:57
  • Ok, me tira uma dúvida? appending += é a variável que recebe o meu formulário certo. O problema e que o formulário que eu tenho aqui e muito grande, e fica complicado colocar tudo em 1 única linha, fica difícil para dar manutenção. como posso adicionar o html com a edentação do html? Commented 30/06/2016 às 12:23
  • @HugoBorges, editado em cima.. Assim fica mais legível
    – Miguel
    Commented 30/06/2016 às 13:12
1

Eu consegui assim desta maneira, mas sem JQuery

function gera(){
var x = document.getElementById("qt").value;
 tab=document.getElementById("tables");
      tab.innerHTML='';
  for(i=1; i<=x ; i++)
    {
      
    tab.innerHTML+="<table><tr><td>Nome "+i+":<input type='text' class='form_campos' name='nome"+i+"'></td></tr><tr><td>Sexo "+i+":<input type='text' class='form_campos' name='sexo"+i+"'></td></tr></table>";
    }
  
}
<input type='text' class='form_campos' name='qtd' onkeyup="gera()" id="qt">

 

<div id="tables"></div>

4
  • muito bom, e isso mesmo. So que teria como ele funcionar sem a necessidade de clicar no botão gerar? Ou seja criar um evento onChange, ou seja quando o usuário mudar o valor do input ele executa. Commented 30/06/2016 às 11:53
  • Já alterei o código ;) Commented 30/06/2016 às 12:43
  • muito bom, ficou bem simples ;) vlw Commented 30/06/2016 às 12:45
  • @PedroLuzio com esse codigo você está a adicionar várias tabelas (<table>)
    – Miguel
    Commented 30/06/2016 às 13:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .