When using a datatable and when a form is placed in one of the row, the submit button cannot be pressed, meaning nothing happens when pressing submit button. I checked the datatable files and found that the file vendor.js that contains this code:
let table1 = document.querySelector('#table1');
let dataTable = new simpleDatatables.DataTable(table1);
when remove this code the submit button working well,But the datatable is crashing.. Has anyone faced this problem before or a solution to this problem? my code:
<table class='table table-striped' id="table1" style="text-align:center; font-size:0.8em;">
<thead >
<tr>
<th style="text-align:center;">#</th>
<th style="text-align:center;">Product name</th>
<th style="text-align:center;">Price</th>
<th style="text-align:center;">Edit</th>
<th style="text-align:center;">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-5 col-md-5">1</td>
<td class="col-sm-1 col-md-1" style="text-align: center"> Apple </td>
<td class="col-sm-1 col-md-1 text-center">3$</td>
<td class="col-sm-1 col-md-1 text-center"><form action="Product" method="post"><input class="form-control" step="1" min="1" max="1000" value="<?= $quantity_ordrs; ?>" type="number" name="qty" >
<input type="hidden" name="order-id" value="1" >
<button type="submit" class="btn btn-outline-primary" name=" update-item"><i class="fa fa-edit"></i>edit</button>
</form></td>
<td class="col-sm-2 col-md-2 " >
<form action="Order?kkk" method="post"><input class="form-control" step="1" min="1" max="1000" value="" type="number" name="qty" ><input type="hidden" name="order-id" value="1" >
<button type="submit" class="btn btn-outline-primary" name="remove-item" ><i class="fa fa-trash"></i>remove</button>
</form>
</td>
</tr></tbody></table>Something is preventing the default onsubmit event. You can either find the event listener responsible for blocking your submission, or you can create anew listener:
<button type="button" class="btn btn-outline-primary" name="update-item"><i class="fa fa-edit"></i>edit</button>
$('[name="update-item"]').on('click', function() {
$('#myForm').submit();
});