Adding rows in the table with javascript

Question

I have one form which has master detail data. i have created one table for details and creating rows on button click using JavaScript, but as soon as i am clicking add row button it is adding row and immediately my page gets reloaded so the added row disappears. i have another buttons to perform other PHP tasks so i can not remove form tag. please help me to get this done. following is the HTML and JavaScript code.

<div class="row pt-3">
                <div class="table-responsive">
                  <table id="vattable" class="table table-sm table-striped">
                    <thead class="thead-light">
                      <tr>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDID"); ?></th>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDSCATEGORY"); ?></th>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDRATE"); ?></th>
                        <th><?php echo GetBilingualLabels($_SESSION['$language'],"VATSETUP","VSDAUTOFLAG"); ?></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><input type="text" class="text-control input-sm" readonly name="vsdid[]" id="vsdid" value=1 style="text-align:right" maxlength="13" /></td>
                        <td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory1" style="text-align:right" maxlength="13" /></td>
                        <td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate1" style="text-align:right" maxlength="13" /></td>
                        <td><input type="text" name="vsdautoflag[]" id="vsdautoflag1" style="text-align:right" maxlength="13" autofocus /></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>


<script>
  $(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    var count=1;
    $(document).on('click','#addrow', function(){
      //alert('a');
      count=count+1;
      $('#vsdid').val(count);
      //alert(count);
      var html_code='';
      html_code +='<tr id="row_id_'+count+'">';
      html_code += '<td><input type="text" class="text-control input-sm" name="vsdid[]" id="vsdid'+count+'" style="text-align:right"/></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory'+count+'" /></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate'+count+'" style="text-align:right" maxlength="13" /></td>';
      html_code +='<td><input type="text" name="vsdautoflag[]" id="vsdautoflag'+count+'" style="text-align:right" /></td>';
      html_code +='<td><button type="submit" name="removerow" id="removerow" class="btn btn-danger fa fa-minus"></button></td></tr>';
      $('#vattable').append(html_code);
      //alert(html_code);
    });
  });
</script>

It's possible that your `#addrow` button is the submit button and the form is being submitted. Add a `return false` just after `//alert(html_code)` — gugateider, Dec 02 '19 at 14:30
Does this answer your question? [Clicking a button within a form causes page refresh](https://stackoverflow.com/questions/12319758/clicking-a-button-within-a-form-causes-page-refresh) — Heretic Monkey, Dec 02 '19 at 14:39

score 0 · Answer 1 · answered Dec 02 '19 at 14:36

You haven't added a button to add the rows, so you're likely observing a side effect.

If I understand correctly, you want to have a button that on click will execute the function you've created. Therefore, you can add a button with id addrow below the table div like this:

 <button id="addrow">
    Add Row
 </button>

And then you can attach your function via jQuery as you've started (I have slightly amended your script) - see JsFiddle - https://jsfiddle.net/9Ljc237k/9/

score 0 · Accepted Answer · answered Dec 02 '19 at 14:36

0

It's possible that your #addrow button is the submit button and the form is being submitted. Add a return false just after //alert(html_code)

answered Dec 02 '19 at 14:36

gugateider

1,983
2
13
17

hossein shaebani · Answer 3 · 2019-12-02T15:08:23.383

0

in your add row button click you should return false at the end, or set type attribute of your button tag to button instead of submit

also is better to append row to tbody tag not table

edited Dec 02 '19 at 15:08

answered Dec 02 '19 at 14:37

hossein shaebani

19
3

score -2 · Answer 4 · answered Dec 02 '19 at 14:57

-2

If you have the problem only with reload you should put event.preventDefault()

 $(document).on('click','#addrow', function(event){
       event.preventDefault();
      //alert('a');
      count=count+1;
      $('#vsdid').val(count);
      //alert(count);
      var html_code='';
      html_code +='<tr id="row_id_'+count+'">';
      html_code += '<td><input type="text" class="text-control input-sm" name="vsdid[]" id="vsdid'+count+'" style="text-align:right"/></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdscategory[]" id="vsdscategory'+count+'" /></td>';
      html_code +='<td><input type="text" class="text-control" name="vsdrate[]" id="vsdrate'+count+'" style="text-align:right" maxlength="13" /></td>';
      html_code +='<td><input type="text" name="vsdautoflag[]" id="vsdautoflag'+count+'" style="text-align:right" /></td>';
      html_code +='<td><button type="submit" name="removerow" id="removerow" class="btn btn-danger fa fa-minus"></button></td></tr>';
      $('#vattable').append(html_code);
      //alert(html_code);
    });

answered Dec 02 '19 at 14:57

Meriton Reqica

116
8

Thanks a lot its working with both commands as first answer return false as well as second answer event.preventDefault(); – MAK Dec 02 '19 at 15:11
in addition to this i am adding one more button to remove record inside the JavaScript add row as follows.. html_code +=''; and i have written another JavaScript function to remove row but it is not working $(document).on('click','.removerow',function(){ var row_id=$(this).attr("id"); $('#row_id_'+row_id).remove; count=count-1; }); – MAK Dec 02 '19 at 15:12
Bear in mind that this approach is only a hack - a fix without understanding the problem and not taking into consideration best practices. It's likely the button is a submit form button and you're preventing the default action - submitting the form. Instead, I think it's better to create a plain button outside the form and attach an onclick add row action to it. – Barzev Dec 02 '19 at 15:19
Thanks if i change the type from "submit" to "button", it is working without adding either of the above commands. please look into my another comment section regarding remove row. – MAK Dec 02 '19 at 15:25
remove is a function so you have to do $('#row_id_'+row_id).remove(); but you can also try $('#vattable').remove('#row_id_'+row_id) – Meriton Reqica Dec 02 '19 at 15:30
i wrote it like that but the function is not executing at all. i tried to put alert to check whether function is executing or not but no response. This is the function to remove row..... $(document).on('click','.removerow',function(){ var row_id=$(this).attr("id"); /*$('#row_id_'+row_id).remove; count=count-1;*/ alert('a'); }); – MAK Dec 02 '19 at 15:33
html_code +='' So here you forgot to add removerow in class attr you class attr should be like this class="btn btn-danger fa fa-minus removerow". – Meriton Reqica Dec 02 '19 at 15:37

Adding rows in the table with javascript

4 Answers4