Question

SO上存在similar question。我仍然发布这个的原因是因为我没有使用像该问题的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，您可以在提交后阻止页面刷新。从action="contact.php"标记中删除<form>。使用<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>

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

提交联系表单时，在不刷新页面的情况下关闭bootstrap模式

2 个答案: