以引导模式提交表单答案

【问题标题】：submit form in bootstrap modal以引导模式提交表单
【发布时间】：2016-08-13 22:49:23
【问题描述】：

我有一个使用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">&times;</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。这太宽泛了。
或者使用 iframe 并放置表单组件
您可以为此使用 AJAX。发出请求并使用 JS/jQuery 处理来自 php 文件的数据。

标签： javascript php jquery twitter-bootstrap

【解决方案1】：

此 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
    }
});

【讨论】：