Форма для отправки ничего не делает

Question

Это код, который я использую для отправки формы на страницу php, а затем для отправки электронного письма.Почему-то это не работает, и я не понимаю, почему.Страница просто перезагружается (почему?), И я не вижу отправляемых запросов.(Я использую MAMP на macOS, если это полезная информация).Что здесь не так?Спасибо, что помогли мне.PS: также, страница перезагружается, когда я нажимаю кнопку отправить.Почему и как я могу предотвратить это?

HTML

         <div id="form_container">
          <form id="contact_form" enctype="multipart/form-data">
            <div class="form-group">
              <div class="row">
                <div class="col">
                  <input name="name" type="text" class="form-control" placeholder="Name" id="inputName">
                </div>
                <div class="col">
                  <input name="surname" type="text" class="form-control" placeholder="Surname" id="inputSurname">
                </div>
              </div>
            </div>
            <div class="form-group">
              <input name="email" type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
            <br/>
            <div class="form-group">
              <input name="subject" type="text" class="form-control" id="inputSubject" placeholder="Subject">
            </div>
            <div class="form-group">
              <textarea name="message" class="form-control" id="textArea" rows="4" placeholder="Write your message here"></textarea>
            </div>
            <div id="btn_container">
              <button id="btn_send" name="submit" type="submit" class="btn btn-dark">SEND</button>
              <div id="success_send" class="alert alert-success" role="alert">
                SUCCESS
              </div>
              <div id="error_send" class="alert alert-danger" role="alert">
                ERROR
              </div>
            </div>
          </form>
        </div>

JS

$( document ).ready(function() {

  $('#contact_form').submit(function(event) {
    $.ajax({
      type: 'POST',
      url: '../php/email.php',
      data: $('#contact_form').serialize(),
      success: function() {
        $('#success_send').show();
      },
      error: function(){
        $('#error_send').show();
      }
    });
  });

});

PHP

<?php
if($_POST){
  $name = $_POST['name'];
  $surname = $_POST['surname'];
  $email = $_POST['email'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];

  $to = "xxxxxx@xxxx.xxx";
  $subject = "Portfolio Mail - ".$subject;
  $body = "Name: ".$name."\t".$surname."\nEmail: ".$email."\nMessage: ".$message;
  $headers = "From: " . $email;

//send email
mail($to, $subject, $body, $headers);
?>

Answer 1

Страница просто перезагружается (почему?)

Поскольку вы отправляете форму.

Данные отправляются на URL, указанный в action (по умолчанию: текущая страница), и результат загружается как новая страница.

, и я не вижу отправляемых запросов.

Обработчик события отправки запускается до отправки формы, это ставит в очередь HTTP-запрос.Затем браузер немедленно покидает страницу, которая убивает среду JS, которой принадлежит запрос, поэтому он отменяется.

---

Вам следует:

1. Убедитесь, что не-JSпредставление формы делает правильные вещи.См. Ненавязчивый JavaScript
2. Остановите поведение отправки формы по умолчанию, если JS успешно выполняется:

Такие

$('#contact_form').submit(function(event) {
    event.preventDefault();
    $.ajax({

Answer 2

Вы должны добавить event.preventDefault(); в начале обработчика отправки, чтобы предотвратить действие отправки по умолчанию.

В качестве бонуса вы должны добавить атрибут действия формы , поскольку это технически необходимо:

<form id="contact_form" action="../php/email.php" enctype="multipart/form-data">

Редактировать: Требуется в HTML4, необязательно в HTML5