Как отправить данные формы на той же странице в WordPress без перезагрузки страницы?

Question

У меня есть собственный шаблон PHP - форма. Я пытаюсь отправить эту форму на той же странице с помощью AJAX без перезагрузки страницы. Скрыть форму после отправки и отобразить thank you сообщение. Эта форма отображается в модальном. Но происходит то, что страница все еще перезагружается.

HTML

<form method="POST" action="" name="modalForm" id="modalForm" enctype="multipart/form-data" autocomplete="off">
        <input placeholder="Last Name*" type="text" name="lastName" id="lastName" value="" required>
        <label class="error" for="name" id="lastName_error">This field is required.</label>
        <input placeholder="First Name*" type="text" name="firstName" id="firstName" value="" required>
        <label class="error" for="name" id="firstName_error">This field is required.</label>
        <input placeholder="Email Address" type="email" name="Email" id="Email" onblur="this.setAttribute('value', this.value);" value="" required>
        <label class="error" for="email" id="email_error">This field is required.</label>
        <span class="validation-text">Please enter a valid email address.</span>
        <input placeholder="Mobile Number*" type="text" name="contactNumber" id="contactNumber" onkeypress="return isNumberKey(event)" value="" size="11" minlength="11" maxlength="11" pattern ="^09\d{9}$" required>
        <label class="error" for="contactNumber" id="contactNumber_error">This field is required.</label>
        <input type="submit" name="submit" value="Submit" id="form-submit">
</form>

JS

    (function($) {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here

      $('.error').hide();
        var name = $("input#lastName").val();
        if (lastName == "") {
        $("label#lastName_error").show();
        $("input#lastName").focus();
        return false;
      }
        var name = $("input#firstName").val();
        if (lastName == "") {
        $("label#firstName_error").show();
        $("input#firstName").focus();
        return false;
      }
        var email = $("input#Email").val();
        if (Email == "") {
        $("label#email_error").show();
        $("input#Email").focus();
        return false;
      }
        var phone = $("input#contactNumber").val();
        if (contactNumber == "") {
        $("label#contactNumber_error").show();
        $("input#contactNumber").focus();
        return false;
      }

    });

    var dataString = 'lastName='+ lastName + '&Email=' + Email + '&contactNumber=' + contactNumber;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "/wordpress-page/",
    data: dataString,
    success: function() {
      $('#modalForm').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;
});

Answer 1

Я создал скрипку с вашим кодом и с фиксированным кодом.

1. Весь код запускается как можно скорее, но должен запускаться после того, как DOM будет готов, чтобы селекторы могли соответствовать DOM-элементам: (function($) { следует изменить на ($(document).ready(function(){

2. Ваш селектор $('.button') не соответствует ни одному элементу, в вашем случае он должен соответствовать кнопку отправки $('#form-submit')

3. Я бы добавил preventDefault() чтобы убедиться, что действие кнопки "Отправить" (отправка формы) по умолчанию не будет выполнено.

4. Проверка формы действительно испорчена. Вы проверяете переменные, которые не установлены.

5. Ваш dataString также использует неустановленные переменные. (Имя также отсутствует.)

Я обменял вызов Ajax на console.log чтобы сбросить данные, но сохранил функцию успеха.

---

В вашем коде так много мелких ошибок, что кажется, что вы скопировали его из разных источников, не выполняя много отладки, прежде чем задавать этот вопрос.

Попробуйте отлаживать шаг за шагом, как вы пишете свой код.