您的位置: 首页  >  技术问答  >  提交联系表单时，在不刷新页面的情况下关闭bootstrap模式

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

分类: 技术问答 • 2022-03-11 21:53:56
问题描述：

A similar question exists on SO. The reason I'm still posting this is because I am not using any AJAX like the OP of that question. My situation involved the form being submitted to a PHP script that sends the email. Here's the form:

<!-- 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>

And here's the PHP this form calls:

$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.">");

I am currently not performing any validation. All I need is to dismiss the form when the submit button is clicked. I tried header("Location: {$_SERVER['HTTP_REFERER']}"); in my PHP but that doesn't serve the purpose as it reloads the previous page which I want to avoid at all cost. I also tried adding data-dismiss="modal" to my submit button as suggested by the accepted answer on the referred question but that prevents the submission altogether!

答

Using Ajax, you can prevent your page for refresh after submit. Remove action="contact.php" from <form> tag. Use below <script></script> to send data to contact.php. For closing modal, you can use either $('.contact-close').click(); Or $('#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>

答

AJAX is the ideal solution to this problem.

But still if you are so keen on not using ajax, there is a workaround.

You can submit the form using a hidden iframe. 

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

This will not reload the page and will dismiss the modal as you desire.

相关推荐