Site icon Hip-Hop Website Design and Development

submit type knowledge in the identical web page in WordPress with out reloading the web page?

I’ve a customized PHP template – type. I am attempting to ship this type in the identical web page utilizing AJAX with out reloading the web page. Cover the shape after submission and show the thanks message. This manner is displayed in a modal. However what occurs is that the web page remains to be reloading.

HTML

<type technique="POST" motion="" identify="modalForm" id="modalForm" enctype="multipart/form-data" autocomplete="off">
        <enter placeholder="Final Title*" sort="textual content" identify="lastName" id="lastName" worth="" required>
        <label class="error" for="identify" id="lastName_error">This discipline is required.</label>
        <enter placeholder="First Title*" sort="textual content" identify="firstName" id="firstName" worth="" required>
        <label class="error" for="identify" id="firstName_error">This discipline is required.</label>
        <enter placeholder="Electronic mail Tackle" sort="e-mail" identify="Electronic mail" id="Electronic mail" onblur="this.setAttribute('worth', this.worth);" worth="" required>
        <label class="error" for="e-mail" id="email_error">This discipline is required.</label>
        <span class="validation-text">Please enter a legitimate e-mail tackle.</span>
        <enter placeholder="Cellular Quantity*" sort="textual content" identify="contactNumber" id="contactNumber" onkeypress="return isNumberKey(occasion)" worth="" measurement="11" minlength="11" maxlength="11" sample ="^09d{9}$" required>
        <label class="error" for="contactNumber" id="contactNumber_error">This discipline is required.</label>
        <enter sort="submit" identify="submit" worth="Submit" id="form-submit">
</type>

JS

    (operate($) {
    $('.error').disguise();
    $(".button").click on(operate() {
      // validate and course of type right here

      $('.error').disguise();
        var identify = $("enter#lastName").val();
        if (lastName == "") {
        $("label#lastName_error").present();
        $("enter#lastName").focus();
        return false;
      }
        var identify = $("enter#firstName").val();
        if (lastName == "") {
        $("label#firstName_error").present();
        $("enter#firstName").focus();
        return false;
      }
        var e-mail = $("enter#Electronic mail").val();
        if (Electronic mail == "") {
        $("label#email_error").present();
        $("enter#Electronic mail").focus();
        return false;
      }
        var cellphone = $("enter#contactNumber").val();
        if (contactNumber == "") {
        $("label#contactNumber_error").present();
        $("enter#contactNumber").focus();
        return false;
      }

    });

    var dataString = 'lastName='+ lastName + '&Electronic mail=' + Electronic mail + '&contactNumber=' + contactNumber;
  //alert (dataString);return false;
  $.ajax({
    sort: "POST",
    url: "/wordpress-page/",
    knowledge: dataString,
    success: operate() {
      $('#modalForm').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Type Submitted!</h2>")
      .append("<p>We can be in contact quickly.</p>")
      .disguise()
      .fadeIn(1500, operate() {
        $('#message').append("<img id='checkmark' src='pictures/examine.png' />");
      });
    }
  });
  return false;
});