Modal Button Inside Table form working as a insert button - php

Question

I've created a button to show a modal but the thing is the button is working as an insert into DB as I don't know what's the problem in my code.
I need the modal to show a table of products fetched form the DB and showed as a table form later on in a report.
here's the modal code inside the form..
<div class="container">
<!-- ======================= Froms ======================= -->
<form action="input.php" method="post">
<div class="row">
<div class="form-group">
<label class="col-md-2 col-form-label">Attention:</label>
<div class="col-md-3">
<select class="form-control" placeholder="Choose" name="Attention" required="true">
<option>Asset</option>
<option>Consumable</option>
<option>Tool</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-form-label">PR No.:</label>
<div class="col-md-3">
<input class="form-control" type="text" name="PRno">
</div>
</div>
</div>
<!-- End of 1st Row -->
<div class="row">
<div class="form-group">
<label class="col-md-2 col-form-label">Project Name:</label>
<div class="col-md-3">
<select class="form-control" placeholder="Choose" name="ProjectName">
<option>Stock</option>
<option>In Use</option>
<option>Scrap</option>
<option>Lost</option>
</select>
</div>
</div>
</div>
<!-- End of 2nd Row -->
<!-- ============== Items Table ============= -->
<div class="row">
<div class="table-responsive">
<table class="table table-bordered" id="tab_logic">
<thead>
<tr>
<th>Item Description</th>
<th>Part Number</th>
<th>Unit</th>
<th>QTY</th>
<th>Unit Price (SR)</th>
<th>Total Price (SR)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
<button class="btn btn-secondary" data-toggle="modal">Select ID</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<!-- HEADER | MODAL -->
<h3 class="modal-title">Title Here</h3>
</div>
<!-- BODY | MODAL -->
<div class="modal-body">
Text Content
</div>
<!-- FOOTER | MODAL -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
<td>
<strong>Record</strong>
</td>
<td>
<strong>Record</strong>
</td>
<td class="col-md-1">
<div>
<input class="form-control" type="number" name="PRno">
</div>
</td>
<td class="col-md-2">
<div>
<input class="form-control" type="number" name="price" step="0.01" min="0.01" max="1000000">
</div>
</td>
<td>
<strong>Record</strong>
</td>
<td class="col-md-1" id="deleteBtn">
<a class="btn btn-default deleteBtn">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End of 3rd Row -->
<div class="row">
<a id="add_row" class="btn btn-default pull-right">Add</a>
</div>
<!-- End of 4th Row -->
<!-- ============== Items Table ============= -->
<div class="input-tigger">
<input type="submit" class="btn btn-primary btn-md" name="btninsert" value="Insert" action="input.php" method="post">
</div>
</form>
</div>
and as shown I added the inset button to insert all the form into the DB.
How could the modal work as a insert button instead of the actual button?

Answer 1

You can use javascript/Jquery to prevent the default action of the button and write methods instance of that. I think this will be helpful to you.
$(function() // execute once the DOM has loaded
{
// wire up Add Item button click event
$("#myButton").click(function(event) //give an ID to modal button
{
event.preventDefault(); // cancel default behavior
$('#myModal').modal('show'); //give an ID to modal
//... rest of add logic
});
});