How to submit form data in the same page in WordPress without reloading the page?

Question

I have a custom PHP template - form. I'm trying to send this form in the same page using AJAX without reloading the page. Hide the form after submission and display the thank you message. This form is displayed in a modal. But what happens is that the page is still reloading.

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

Your jQuery event is bound to elements with the class submit, but your submit button in the form doesn't have that class.

Either add that class to the submit button, or just target the form itself. Simply change

$(".button").click(function() {

to

$("#modalForm").submit(function() {

This will fire when the form is submitted, whether the user clicks the submit button or simply hits enter in a text field.