[英]submit form in bootstrap modal
我有一個使用modal
注冊新用戶的頁面這是模態代碼:
<div id="register" 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">New User</h4>
</div>
<div class="modal-body">
<form id="new_customer" action="../model/php/action.php" method="post">
<div class="form-group">
<label for="usr">username:</label>
<input type="text" name="user" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="em">email :</label>
<input type="text" name="email" class="form-control" id="em">
</div>
<div class="form-group">
<label for="pwd">password :</label>
<input type="password" name="pwd" class="form-control" id="pwd">
</div>
<button type="submit" id="signup" name="signup" class="btn btn-success btn-lg">signup<span class="glyphicon glyphicon-user"></span></button>
</form> </div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
這里是示例操作頁面:
<?php
if(isset($_POST['signup']))
{
if(empty($_POST['user']) || empty($_POST['email']) || empty($_POST['pwd']))
{
echo $lang['empty'];
}
}
?>
我希望在同一個對話框中查看結果。
這個ajax請求你的問題,如果你不理解它,請閱讀jquery和ajax請求。
http://api.jquery.com/jquery.ajax/
https://learn.jquery.com/
ajax請求它不會調用頁面的重載,所以你的模態仍會顯示:
$.ajax({
type: "POST",
data: {user: $('#usr').val(), email: $('#em').val(), pwd: $('#pwd').val()},
url: "/model/php/action.php",
success: function(data){
//here data will contain all output from .php, so for your script it will equal to $lang['empty'], you ca do whatever you want with data
//f.e. set to modal
},
error: function(data) {
console.log(data); //error message
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.