表格内的模式按钮窗体用作插入按钮

Question

>我创建了一个按钮来显示模态，但问题是该按钮可以插入到数据库中，因为我不知道我的代码中有什么问题。

我需要模式来显示从数据库中获取的产品表，并在稍后在报告中显示为表格形式。

这是表单中的模态代码。

<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>

如图所示，我添加了插入按钮以将所有表单插入数据库。

模态如何作为插入按钮而不是实际按钮工作？

Answer 1

您可以使用javascript/Jquery来阻止按钮的默认操作，并编写该按钮的实例。我认为这对你有帮助。

$(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
});
});