提交联系表单时关闭引导模式而不刷新页面

Question

similar question 存在于 SO 上。我仍然发布这个的原因是因为我没有使用任何像那个问题的 OP 这样的 AJAX。我的情况涉及将表单提交给发送电子邮件的 PHP 脚本。表格如下：

<!-- Modal for contact form -->
    <div class="modal fade" id="contact" role="dialog" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content contact-box">
          <form class="form-horizontal" role="form" name="contact-form" id="contact-form" action="contact.php" method="post">
              <div class="modal-header contact-title">
                <img src="bootstrap/img/airmail.png" class="airmail">
                <h4>Let‘s get talking!</h4>
              </div>
              <div class="modal-body contact-body">
                <div class="form-group has-feedback">
                  <label for="contact-name" class="col-xs-2 control-label contact-label">Name</label>
                  <div class="col-xs-10">
                    <input type="text" class="form-control contact-field contact-field-single" name="contact-name" id="contact-name" placeholder="John Doe" OnMouseOver="$(this).focus();">
                    <i class="glyphicon glyphicon-user form-control-feedback input-icon"></i>
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label for="contact-email" class="col-xs-2 control-label">Email</label>
                  <div class="col-xs-10">
                    <input type="email" class="form-control contact-field contact-field-single" name="contact-email" id="contact-email" placeholder="example@domain.com" OnMouseOver="$(this).focus();">
                    <i class="glyphicon glyphicon-envelope form-control-feedback input-icon"></i>
                  </div>
                </div>
                <div class="form-group">
                  <label for="contact-message" class="col-xs-2 control-label">Message</label>
                  <div class="col-xs-10">
                    <textarea class="form-control contact-field" name="contact-message" rows="10" placeholder="No links please. They are bad and look like spam. Other than that, nothing should be taboo here!" OnMouseOver="$(this).focus();"></textarea>
                  </div>
                </div>
              </div>
              <div class="modal-footer contact-footer">
                <a class="btn btn-default btn-lg contact-close" data-dismiss="modal">Close</a>
                <button type="submit" name="submit" id="submit" class="btn btn-primary btn-lg contact-send">Send</button>
              </div>
          </form>
        </div>
      </div>
    </div>

这是这个表单调用的 PHP：

$name = $_POST["contact-name"];
$email = $_POST["contact-email"];
$message = $_POST["contact-message"];

$EmailTo = "contact@peppyburro.com";
$Subject = "New Message Received";

mail($EmailTo, $Subject, $message, "From: ".$name." <".$email.">");

我目前没有进行任何验证。我只需要在单击提交按钮时关闭表单。我在我的 PHP 中尝试了header("Location: {$_SERVER['HTTP_REFERER']}");，但这并没有达到目的，因为它重新加载了我想不惜一切代价避免的上一页。我还尝试将data-dismiss="modal" 添加到我的提交按钮中，正如所提问题的已接受答案所建议的那样，但这完全阻止了提交！

Answer 1

使用 Ajax，您可以防止页面在提交后刷新。从<form> 标记中删除action="contact.php"。使用下面的<script></script> 将数据发送到contact.php。对于关闭模式，您可以使用 $('.contact-close').click(); 或 $('#contact').modal('hide');

<div class="modal fade" id="contact" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content contact-box">
      <form class="form-horizontal" role="form" name="contact-form" id="contact-form" method="post">
          .
          .
      </form>
    </div>
  </div>
</div>

<script>
$(document).ready(function (e) {
  $("#submit").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
      url: "contact.php", // Url to which the request is send
      type: "POST",             // Type of request to be send, called as method
      data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
      contentType: false,       // The content type used when sending data to the server.
      cache: false,             // To unable request pages to be cached
      processData:false,        // To send DOMDocument or non processed data file it is set to false
      success: function(data)   // A function to be called if request succeeds
      {
          $('.contact-close').click();
          $('#contact').modal('hide');
          alert("Email Sent Successfully");
      }
    });
  }));
});
</script>

Answer 2

AJAX 是解决这个问题的理想方案。

但是，如果您如此热衷于不使用 ajax，还是有一种解决方法。

您可以使用隐藏的 iframe 提交表单。

<iframe name="theiframe" style="display: none;"></iframe>
<form name='random' method='POST' action="random.php" target="theiframe">
  ...
</form>

这不会重新加载页面，并且会根据需要关闭模式。