Php 表格窗体内的模式按钮用作插入按钮
我创建了一个按钮来显示一个模态,但问题是这个按钮是作为DB的一个插件工作的,因为我不知道我的代码中有什么问题 我需要模态来显示从数据库中获取的产品表,并在稍后的报告中显示为表格 这是表单中的模式代码Php 表格窗体内的模式按钮用作插入按钮,php,html,twitter-bootstrap,modal-dialog,bootstrap-modal,Php,Html,Twitter Bootstrap,Modal Dialog,Bootstrap Modal,我创建了一个按钮来显示一个模态,但问题是这个按钮是作为DB的一个插件工作的,因为我不知道我的代码中有什么问题 我需要模态来显示从数据库中获取的产品表,并在稍后的报告中显示为表格 这是表单中的模式代码 <div class="container"> <!-- ======================= Froms ======================= --> <form action="input.php" method="post"
<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>
注意:
资产
消耗品
工具
请购单编号:
项目名称:
股票
使用中
碎片
迷路的
项目说明
零件号
单位
数量
单价(SR)
总价(SR)
选择ID
标题在这里
文本内容
接近
保存更改
记录
记录
记录
删除
添加
如图所示,我添加了inset按钮以将所有表单插入数据库
模态如何作为插入按钮而不是实际按钮工作?您可以使用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
});
});
可以使用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
});
});