![](/img/trans.png)
[英]After form Validation enable submit button and if click submit button open modal popup using jQuery?
[英]How to open popup form submit with Ajax when click a button?
我有一张数据表。 在表格上方,我有一个添加按钮,当单击该按钮时,将显示一个表单。 但是我想要的是在单击添加按钮时在弹出窗口中显示该表单以提交。
我怎样才能做到这一点?
下面附上我的截图。
我的表格视图代码:
<html>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add'/></td>
<div id="created"></div>
<?php
$doc = $display['hits']['hits'];
$html = '<table id = "customers" >
<tr>
<th>Id</th>
<th>First_name</th>
<th>Last_name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Password</th>
<th>Status</th>
<th>Createddate</th>
<th>Updateddate</th>
<th>File</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
foreach($doc as $key => $value)
{
$html = $html."<tr>
<td>".$value['_source']['Id']."</td>
<td>".$value['_source']['First_name']."</td>
<td>".$value['_source']['Last_name']."</td>
<td>".$value['_source']['Email']."</td>
<td>".$value['_source']['Phone']."</td>
<td>".$value['_source']['Address']."</td>
<td>".$value['_source']['Password']."</td>
<td>".$value['_source']['Status']."</td>
<td>".$value['_source']['Createddate']."</td>
<td>".$value['_source']['Updateddate']."</td>
<td>".$value['_source']['File']."</td>
<td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
<td><input type='button' name='Delete' id='Delete' value='Delete'/></td>
</tr>";
}
$html = $html."</table>";
echo $html;
?>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$('.add_class').click(function(){
$("#created").toggle();
});
});
</script>
<script>
$(document).ready(function(){
$(".add_class").click(function(e) {
e.preventDefault();
$.ajax({
url : "Crud_controller/Add",
data : '',
dataType: "HTML",
success: function(response) {
var result = $(response).find("body");
$("#created").html(response);
}
}).error(function() { alert("Something went wrong"); });
});
});
</script>
我的表格代码:
<!DOCTYPE html>
<html>
<head>
<title>Add Employee</title>
<style>
label
{
display:inline-block;
width:100px;
margin-bottom:10px;
}
</style>
</head>
<body>
<h1>Add Employee</h1>
<div id="add_div">
<form method="post" id="add_form" action="Crud_controller/add">
<label>ID:</label>
<input type="text" name="Id" /><br/>
<label>First Name:</label>
<input type="text" name="First_name"/><br/>
<label>Last Name:</label>
<input type="text" name="Last_name"/><br/>
<label>Email:</label>
<input type="email" name="Email"/><br/>
<label>Phone:</label>
<input type="text" name="Phone"/><br/>
<label>Address:</label>
<input type="text" name="Address"/><br/>
<label>Password:</label>
<input type="password" name="Password"/><br/>
<label>Status:</label>
<input type="text" name="Status"/><br/>
<label>CreatedDate:</label>
<input type="text" name="Createddate"/><br/>
<label>Updateddate:</label>
<input type="text" name="Updateddate"/><br/><br/>
<label>FileUpload:</label>
<input name="File" type="file" multiple="true"><br/><br/>
<input type="submit" name="submit" class="add" value="Insert"/>
</form>
</div>
</body>
</html>
您需要在HTML中添加bootsrap模态。
<html>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add' data-toggle="modal" data-target="#myModal"/></td>
<?php
$doc = $display['hits']['hits'];
$html = '<table id = "customers" >
<tr>
<th>Id</th>
<th>First_name</th>
<th>Last_name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Password</th>
<th>Status</th>
<th>Createddate</th>
<th>Updateddate</th>
<th>File</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
foreach($doc as $key => $value)
{
$html = $html."<tr>
<td>".$value['_source']['Id']."</td>
<td>".$value['_source']['First_name']."</td>
<td>".$value['_source']['Last_name']."</td>
<td>".$value['_source']['Email']."</td>
<td>".$value['_source']['Phone']."</td>
<td>".$value['_source']['Address']."</td>
<td>".$value['_source']['Password']."</td>
<td>".$value['_source']['Status']."</td>
<td>".$value['_source']['Createddate']."</td>
<td>".$value['_source']['Updateddate']."</td>
<td>".$value['_source']['File']."</td>
<td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
<td><input type='button' name='Delete' id='Delete' value='Delete'/></td>
</tr>";
}
$html = $html."</table>";
echo $html;
?>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Employee</h4>
</div>
<div class="modal-body" id="created">
<form method="post" id="add_form" action="Crud_controller/add">
<label>ID:</label>
<input type="text" name="Id" /><br/>
<label>First Name:</label>
<input type="text" name="First_name"/><br/>
<label>Last Name:</label>
<input type="text" name="Last_name"/><br/>
<label>Email:</label>
<input type="email" name="Email"/><br/>
<label>Phone:</label>
<input type="text" name="Phone"/><br/>
<label>Address:</label>
<input type="text" name="Address"/><br/>
<label>Password:</label>
<input type="password" name="Password"/><br/>
<label>Status:</label>
<input type="text" name="Status"/><br/>
<label>CreatedDate:</label>
<input type="text" name="Createddate"/><br/>
<label>Updateddate:</label>
<input type="text" name="Updateddate"/><br/><br/>
<label>FileUpload:</label>
<input name="File" type="file" multiple="true"><br/><br/>
<input type="submit" name="submit" class="add" value="Insert"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
不要忘记在文件中包含Bootstrap js和CSS,无需发送AJAX请求来获取HTML表单。
基本上只使用模态(弹出窗口),然后将#add_div
移到模态以及插入按钮内。 然后在您的添加按钮中添加一个事件,该事件将触发模态,您的#add_div
下面是如何仅使用纯JavaScript来创建和触发模态的附件链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.