Page is hanging when submitting the form in php - php

Question

I am trying to submit a form using jQuery and ended up hanging the page. I have this one page which have listing and have used table for that. For each listing i am giving edit option. So when user click on edit button on the row, a form will drop below the tr tag and update button. When i click on the update button, page start loading but it keeps loading forever.
This is my form (Sample), I have foreach for listing, so for each row, we have a new form separated with id.
<form action="" class="edit_form 1" method="POST">
<div class="row filter-row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label class="focus-label">Order Id</label>
<input type="text" name="order_id" class="form-control floating order_id" value="">
<div class="orderid_error text-danger form_error"></div>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary submit-btn test_update" data-test_id="1" name="testupdate" type="button" value="test_update">Update</button>
</div>
</form>
JS
$(document).on("click",".test_update",function(){
var test_id = $(this).attr("data-test_id");
if(typeof test_id!="undefined" && test_id!=""){
$(".edit_form."+test_id).submit();
}
});

Answer 1

I think the issue is over here:
$(".edit_form."+test_id).submit();
jQuery searches for the element with class value as => 'edit_form.1' which does not exist in the code.
For this to work you need to have a unique id for every form(assuming you've already done it as you mentioned).
Try this:
$(document).on("click",".test_update",function(){
var test_id = $(this).attr("data-test_id");
if(typeof test_id!="undefined" && test_id!=""){
$(this).parent().parent().submit();
}
});
Since in the DOM nodes every button will be differently saved even though it has same class it shouldn't be a problem adding parent() as it will call the parent of the clicked element but not all the buttons with the class name.
Let me know if it worked. :)

Answer 2

Assigning multiple forms on a single page might be occurring the issue. Since you are using jQuery to submit the form, there is a workaround for the same.
Do not create your form inside the foreach, instead just create one form with empty input box and assign the value through jQuery and then submit the form.
<form id="example" action="" class="edit_form 1" method="POST">
<div class="row filter-row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label class="focus-label">Order Id</label>
<input id="orderid" type="text" name="order_id" class="form-control floating order_id" value="">
<div class="orderid_error text-danger form_error"></div>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary submit-btn test_update" data-test_id="1" name="testupdate" type="button" value="test_update">Update</button>
</div>
JS
$(document).on("click",".test_update",function(){
var test_id = $(this).attr("data-test_id");
if(typeof test_id!="undefined" && test_id!=""){
$("#orderid").val("YOUR VALUE");
$("#example").submit();
}
});
This will definitely work.