Auto Populate table rows with input fields after change the input value of one field

I want to auto populate table rows with input fields on changing value of one input field.

Expected Code

<label>Total Seats</label>
<input type="text" name="total_seat_numbers" id="total_seat_numbers" class="form-control">

After entering / changing value of this total_seat_numbers, following table rows should be populated.

 <table class="table table-bordered" id="table_fields">
<tr>
  <th>Full Name</th>
  <th>Mobile</th>
  <th>Email</th>
  <th>City</th>
  <th>State</th>
</tr>

 // if total_seat_numbers = 1
   <tr>
    <td><input type="text" name="full_name[]" class="form-control"></td>
    <td><input type="text" name="mobile[]" class="form-control"></td>
    <td><input type="text" name="email[]" class="form-control"></td>
    <td><input type="text" name="city[]" class="form-control"></td>
    <td><input type="text" name="state[]" class="form-control"></td>
   </tr>    

  // if total_seat_numbers = 2
   <tr>
    <td><input type="text" name="full_name[]" class="form-control"></td>
    <td><input type="text" name="mobile[]" class="form-control"></td>
    <td><input type="text" name="email[]" class="form-control"></td>
    <td><input type="text" name="city[]" class="form-control"></td>
    <td><input type="text" name="state[]" class="form-control"></td>
   </tr>
   <tr>
    <td><input type="text" name="full_name[]" class="form-control"></td>
    <td><input type="text" name="mobile[]" class="form-control"></td>
    <td><input type="text" name="email[]" class="form-control"></td>
    <td><input type="text" name="city[]" class="form-control"></td>
    <td><input type="text" name="state[]" class="form-control"></td>
   </tr>

    /// ----- like this so on as per total number of `total_seat_numbers`....

 </table>

I am trying Jquery as follows :

<script>
$("#total_seat_numbers").change(function(){ 
    var html_row = '<tr><td><input type="text" name="full_name[]" class="form-control"></td><td><input type="text" name="mobile[]" class="form-control"></td><td><input type="text" name="email[]" class="form-control"></td><td><input type="text" name="city[]" class="form-control"></td><td><input type="text" name="state[]" class="form-control"></td></tr>';
    var max = $("#total_seat_numbers").val();
    var x = 1;  
    if(x <= max){
      $('#table_fields').append(html_row);
    }
 });
</script>

I am stuck how to execute append (html_row) and how to remove popuplated extra rows when total_seat_numbers are less than previous enterd value…

Help is appreciated…

UPDATE :

I have managed to add number of rows…. But now stuck at How to remove extra rows added previously when entered number is smaller than previously entered number…

e.g. First time, total_seat_numbners value = 5, 5 rows get added with following jquery….

But if user changes value of total_seat_numbers from 5 to 3, last 2 rows of previously added 5 rows should be get removed…

How to achieve this ?

Updated Jquery :

$("#total_state_members").change(function(){   
    var html_row = '<tr><td><input type="text" name="full_name[]" class="form-control"></td><td><input type="text" name="mobile[]" class="form-control"></td><td><input type="text" name="email[]" class="form-control"></td><td><input type="text" name="city[]" class="form-control"></td><td><input type="text" name="state[]" class="form-control"></td></tr>';
    var max = $("#total_seat_numbers").val();  
    
    for(var i = 0; i < max; i++) {
            $('#table_fields').append(html_row);
        
        }           
});

You need to sign in to view this answers

Related Post