Adding more input with jQuery

Asked

Viewed 244 times

1

Guys I have a simple form with 3 input. I need to enter a quantity in the 'Qtd' input, and with that I need jQuery to multiply the table with the form, and change the 'name'.

Example;

If I enter 3 in the input 'Qtd' will appear 3 tables with the following input: 'name1','Nome2','name3','sexo1','sexo2','sexo3'.

Does anyone know how I can do it?

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

jquery

2 answers

2


I believe this is what you want:

$('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>

  • very cool, that’s right, but could it work without having to click the enter button? I mean, as soon as I change the value it already mounts the form

  • So there’s no @Hugoborges. is in the keyup/click event. I changed the input to number

  • that’s just what I want, thank you very much ;)

  • Okay, take away a question? appending += is the variable that gets my form right. The problem is that the form I have here is very large, and it is difficult to put everything in 1 single line, it is difficult to maintain. how can I add html with html embedding?

  • @Hugoborges, edited on top.. So it becomes more readable

  • This way you only make the append to everything in the end, it is not necessary to make once per loop inside the for that gets very heavy @Hugoborges. I’ve even simplified the code further by removing the else

Show 1 more comment

1

I got it this way, but no 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>

  • very good, and that’s right. Only what would it work without the need to click the generate button? That is to create an onChange event, that is when the user changes the value of the input it executes.

  • I’ve already changed the code ;)

  • very good, it was very simple ;) vlw

  • @Pedroluzio with this code you are adding several tables (<table>)

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.