Html Form doesnt submit after append with jquery

Question

I append HTML form with jquery append function but when I click on submit button it doesn't submit

$( "body" ).on( "click", "#addPackage", function() {
    packageId = 'package'+ id;
    id = id+1;
  $('.table tbody').append('<tr id="' + packageId + '"> <form class="" onsubmit="editPackage();return false;" method="post"><td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" ><i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></form></tr>');
});

you are returning false on submit, only `editPackage()` is trigged — Alen.Toma, Feb 04 '19 at 15:12
@David The OP is probably referring to ``. The default type of the button element is submit. — j08691, Feb 04 '19 at 15:14

Kamil Kiełczewski · Accepted Answer · 2019-02-04T15:36:03.113

This is what you probably want, instead of use <form> (which only execute function editPackage) in <tr> (and it is incorrect was what mentioned in Justinas comment ) you can execute editPackage after click on row-button and read data fro row in this way (i remove <form> from your append string and change <button>):

let id=0;
$( "body" ).on( "click", "#addPackage", function() {
    packageId = 'package'+ id;
    id = id+1;
    //console.log($('.table tbody'));
  $('.table tbody').append('<tr id="' + packageId + '"> <td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" onclick="editPackage(this)">submit<i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></tr>');
});

function editPackage(btn) {
  let tds =btn.parentNode.parentNode.children
  let v1=tds[0].children[0].value;
  let v2=tds[1].children[0].value;
  let v3=tds[2].children[0].value;
  console.log('submit', v1, v2, v3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="addPackage">add</button>
<table class="table"><tbody></tbody><table>

Html Form doesnt submit after append with jquery

1 Answers1