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;
});