Отклонить модал начальной загрузки без обновления страницы при отправке контактной формы

Похожий вопрос существует на SO. Причина, по которой я до сих пор публикую это, заключается в том, что я не использую AJAX, как OP этого вопроса. Моя ситуация была связана с отправкой формы в сценарий 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.">");

В настоящее время я не выполняю никаких проверок. Все, что мне нужно, это закрыть форму при нажатии кнопки отправки. Я старался header("Location: {$_SERVER['HTTP_REFERER']}"); в моем PHP, но это не служит цели, поскольку перезагружает предыдущую страницу, которую я хочу избежать любой ценой. Я также попытался добавить data-dismiss="modal" на кнопку "Отправить" в соответствии с принятым ответом на заданный вопрос, но это полностью исключает возможность отправки!

Источник

2 ответа

Решение

Используя 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>
Источник

AJAX является идеальным решением этой проблемы.

Но, тем не менее, если вы так сильно не хотите использовать AJAX, есть обходной путь.

Вы можете отправить форму, используя скрытый фрейм.

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

Это не будет перезагружать страницу и отклонит модальное, как вы пожелаете.

Источник
Другие вопросы по тегам