jQuery: append table rows dynamically upon clicking 'Add' button

Question

I have this html form where I have added a button for the items field.

<form>
    <table width="50%" align="center">
        <tr>
            <td>Amount</td>
            <td><input type="number" name="amount" id="amount" required></td>
        </tr>
        <tr>
            <td>Buyer</td>
            <td><input type="text" name="buyer" id="buyer" maxlength="255" required></td>
        </tr>
        <tr>
            <td>Receipt Id</td>
            <td><input type="text" name="receipt_id" name="receipt_id" maxlength="20" required></td>
        </tr>       
        <tr class="input_fields_wrap">
            <td>Items</td>
            <td><input type="text" name="items[]" class="items" required>&nbsp;<button class="add_field_button">Add+</button></td>
        </tr>               
        <tr>
            <td>Buyer Email</td>
            <td><input type="email" name="buyer_email" id="buyer_email" required></td>
        </tr>
        <tr>
            <td>Note</td>
            <td><input type="text" name="note" id="note" maxlength="30" required></td>
        </tr>
        <tr>
            <td>City</td>
            <td><input type="text" name="city" id="city" maxlength="20" required></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td><input type="text" name="phone" id="phone" required></td>
        </tr>
        <tr>
            <td>Entry By</td>
            <td><input type="text" name="entry_by" id="entry_by" required></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="submit" value="Recrod Sales"></td>
        </tr>
    </table>
</form>

Now, I want to add another copy of the items fields after that item field

To do that I am using this jQuery:

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();     
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        var form = '<div><tr><td>Items</td><td><input type="text" name="items[]" class="items" required>&nbsp;<button class="add_field_button">Add+</button></td></tr><a href="#" class="remove_field">Remove</a></div>';
        //$(wrapper).append(form); //add input box
        $(form).after(wrapper);

    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

but when I press that add(+) button it's not working as expected. Can you tell me how can I do this?

Thanks.

One problem is the table structure, it don't allow you to do table > div > tr (is a invalid table structure). Use: table > tr > div — Roy Bogado
– Roy Bogado, Commented Jun 19, 2019 at 7:07
the var form=... you append to the table an invalid structure div > tr > td (items) /td etc... that a structure problem. because a table should be table > tr > td and inside the elements <div> and <a>. — Roy Bogado
– Roy Bogado, Commented Jun 19, 2019 at 7:11
Has nothing directly to do with the question but you should not use tables here, you should rather use labels and input fields and divs only. — cloned
– cloned, Commented Jun 19, 2019 at 7:16

Yevhen Horbunkov · Accepted Answer · 2019-06-19 07:20:17Z

Won't simple .insertAfter() do the trick for you? :

const itemHtml = `<tr class="input_fields_wrap"><td>Items</td><td><input type="text" name="items[]" class="items" required>&nbsp;<button class="add_field_button">Add+</button></td></tr>`;

$('form').on('click', '.add_field_button', function(event){
  event.preventDefault();
  $(itemHtml).insertAfter($(event.target).closest('tr'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form><table width="50%" align="center"><tr><td>Amount</td><td><input type="number" name="amount" id="amount" required></td></tr><tr><td>Buyer</td><td><input type="text" name="buyer" id="buyer" maxlength="255" required></td></tr><tr><td>Receipt Id</td><td><input type="text" name="receipt_id" name="receipt_id" maxlength="20" required></td></tr>       <tr class="input_fields_wrap"><td>Items</td><td><input type="text" name="items[]" class="items" required>&nbsp;<button class="add_field_button">Add+</button></td></tr>               <tr><td>Buyer Email</td><td><input type="email" name="buyer_email" id="buyer_email" required></td></tr><tr><td>Note</td><td><input type="text" name="note" id="note" maxlength="30" required></td></tr><tr><td>City</td><td><input type="text" name="city" id="city" maxlength="20" required></td></tr><tr><td>Phone</td><td><input type="text" name="phone" id="phone" required></td></tr><tr><td>Entry By</td><td><input type="text" name="entry_by" id="entry_by" required></td></tr><tr><td>&nbsp;</td><td><input type="submit" name="submit" value="Recrod Sales"></td></tr></table></form>

Anoop Babu · Accepted Answer · 2019-06-19 07:31:00Z

0

try this

var itemHtml='<tr class="input_fields_wrap">
        <td>Items</td>
        <td><input type="text" name="items[]" class="items" required></td>
        </tr>';

$('.add_field_button').click(function(){
   $(itemHtml).insertAfter($(this).closest('tr'));
});

answered Jun 19, 2019 at 7:31

Anoop Babu

18813 bronze badges

Comments

halfer · Accepted Answer · 2020-03-26 17:07:20Z

0

The $(add_button) in your code needs to be add_button, as add_button is already a jQuery object.

Note: also as a good convention save a jQuery object with a variable name starting with a $.

For adding the element you can use clone() method, so jQuery avoids deleting the current element. Like so:

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap").clone(); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  add_button.click(function(e){ //on add input button click
      e.preventDefault();
      if(x < max_fields){ //max input box allowed
          x++; //text box increment
          var form = $(`
            <div>
              <tr class="input_fields_wrap"><td>Buyer Email</td><td>
                <input type="email" name="buyer_email" id="buyer_email" required>
              </td></tr>
              <a href="#" class="remove_field">Remove</a>
            </div>';
          `)
          //$(wrapper).append(form); //add input box
          $('form').after(wrapper);

      }
  });

For the remove part there is no element with the class .remove_field , so look into this first.

edited Mar 26, 2020 at 17:07

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jun 19, 2019 at 7:13

Alexander Solonik

10.4k20 gold badges88 silver badges189 bronze badges

1 Comment

Wimanicesir Over a year ago

I could be wrong but a jQuery object that gets reinitialised as jQuery object does not give an error.

Collectives™ on Stack Overflow

jQuery: append table rows dynamically upon clicking 'Add' button

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related