Некорректно работает AJAX запрос

Question

Есть форма обратной связи. При нажатии на кнопку С id "get_r" данные, введенные пользователем отправляются мне на почту. За обработку отвечает файл "session.php".

Также после того, как пользователь нажмет на кнопку "get_r" , всплывает модальное окно (boostrap), в котором пользователю сообщается что письмо успешно отправлено.

С отправкой данных все нормально - после нажатия кнопки мне приходит письмо на почту со всеми данными с формы. Модальное окно работает корректно.

Проблема в том что после нажатия кнопки и отправки данных страница перезагружается и пользователь не успевает увидеть содержимое модального окна. При использовании AJAX перезагрузка не происходит, но тем не менее страница все-равно перезагружается.

Как сделать так чтобы при нажатии кнопки данные отправлялись без перезагрузки.

<!-- Отправка данных на  E-mail -->

<
script >
  $('#get_r').click(function() {
    var quest_name = $('#quest_name').val();
    var quest_email = $('#quest_email').val();
    var quest_date = $('#quest_date').val();
    var quest_time = $('#quest_time').val();
    var quest_num = $('#quest_num').val();
    var quest_tel = $('#quest_tel').val();

    $.ajax({
      url: '/session.php',
      type: 'POST',
      cache: false,
      data: {
        'name': quest_name,
        'email': quest_email,
        'date': quest_date,
        'time': quest_time,
        'number': quest_num,
        'tel': quest_tel
      },
      dataType: 'html',
      beforeSend: function() {
        $('#get_r').attr("disabled", "disabled");
      },
      success: function(data) {
        if (data == true) {
          $('#quest_name').val("");
          $('#quest_email').val("");
          $('#quest_date').val("");
          $('#quest_time').val("");
          $('#quest_num').val("");
          $('#quest_tel').val("");
          $('.modal_text').text("Ваш заказ отправлен. Мы свяжемся с вами через некоторое время");
          else {
            if (data == false)
              $('.modal_text').text('Ошибка отправки. Попробуйте еще раз');
            else {
              switch (data)
              case "Укажите имя";
              $("#quest_name").val("Укажите ваше имя");
              break;
              case "Укажите адрес электронной почты";
              $("#quest_email").val("Укажите ваш E-mail");
              break;
              case "Укажите дату"
              $("#quest_date").val("Укажите предполагаемую дату");
              break;
              case "Укажите время"
              $("#quest_time").val("Укажите предполагаемое время");
              break;
              case "Укажите количество гостей"
              $("#quest_num").val("Укажите количество гостей");
              case "Укажите ваш телефонный номер"
              $("#quest_tel").val("Укажите ваш номер телефона");
              break;
            }
          }
        }
        $("#get_r").removeAttr("disabled");
      }
    })
  }) <
  /script>

<div id="reservation_form">

  <form name="reservation" id="get_data" method="post">

    <h4>Заполните все поля ниже и нажмите кнопку для отправки.</h4>

    <input type="text" placeholder="    Имя" id="quest_name" name="quest_name" required><br>
    <input type="number" placeholder="   Количество гостей" name="quest_num" id="quest_num" required><br>
    <input type="date" placeholder="    Дата" id="quest_date" name="quest_Date" required>
    <input type="time" placeholder="   Время" id="quest_time" name="quest_time" required><br>
    <input type="email" placeholder="   Адрес электронной почты" name="quest_email" id="quest_email" required> <br>
    <input type="tel" placeholder="   Телефонный номер" name="quest_tel" id="quest_tel" required>



    <div id="reservation_link">
      <button name="get_r" id="get_r" data-toggle="modal" data-target="#reservation_open" title="Введите данные в в форму выше" /> Зарезервировать </button>
    </div>


  </form>


</div>
</div>
</div>

БЛОГ НА HUSL

Некорректно работает AJAX запрос

Ответы (0 шт):