I have a form with the name contact-us-form and an undefined number of inputs.
I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the form’s inputs contact-us-form.
that’s my HTML Input
<div class="box">
<form action="/contact.php" id="contact-us-form" method="POST"
data-callback="pixelTracking">
<input type="hidden" name="language" id="language" value="en">
<div class="row">
<div class="col-12 error-message"></div>
<div class="col-md-6">
<select name="reasonOfEnquiry" id="reasonOfEnquiry"
aria-placeholder="Reason of Enquiry" class="form-control" data-default=""
data-dafault-name="Reason of Enquiry"
data-error="Please select a Reason of enquiry" data-required="not-empty">
<option disabled value="">Reason of Enquiry</option>
<option value="General Enquiry">General Enquiry</option>
<option selected value="Facility Management Solutions">Facility Management
Solutions</option>
<option value="Corporate & Retail Solutions">Corporate & Retail Solutions
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input class="form-control required" data-error="Please enter your First name"
type="text" placeholder="First name" maxlength="40" name="firstName"
id="firstName" data-required="not-empty">
</div>
<div class="col-md-6">
<input class="form-control required" data-error="Please enter your Last name"
type="text" placeholder="Last name" maxlength="40" name="lastName"
id="lastName" data-required="not-empty">
</div>
</div>
<div class="row">
<div class="col-md-6">
<input class="form-control required"
data-error="Please enter a valid Email address" type="email" id="email"
maxlength="255" placeholder="Email" name="email" data-required="email">
</div>
<div class="col-md-6" bis_skin_checked="1">
<div class="number-group" bis_skin_checked="1">
<select name="phoneNumberArea" id="phoneNumberArea" class="form-control">
</select>
<input class="form-control required"
data-error="Please enter a valid Phone number (10 numbers, no symbols)"
type="number" maxlength="10" placeholder="Phone number" id="phonenumber"
name="phoneNumber" data-required="phone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="form-control required" data-error="Please enter your Message"
name="message" maxlength="500" placeholder="Message" id="message"
data-required="not-empty"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6 text-right submit-col">
<button type="submit" class="btn btn-black"><span
class="d-flex justify-content-center align-content-center">Submit</span></button>
</div>
</div>
</form>
<div class="success">
<h5>Thank you for your message</h5>
<p>Your message has been submitted to our team.</p>
</div>
<div class="error-msg">
<h5>An error occurred while processing your request.</h5>
</div>
</div>
and I’m using PHP mailer for sending the mail it works very well when I remove my Javascript file from my contact.html after some times of try I realized that the issue with e.preventDefault();
and that’s my JS
function c(t) {
var e = window.getFormData($(t));
$.ajax({
type: $(t).attr("method"),
url: $(t).attr("action"),
contentType: "application/json; charsect=utf-8",
dataType: "json",
data: JSON.stringify(e),
success: function (e) {
null != e && 200 == e.status
? ($(t).attr("data-callback") && pixelTracking(),
$(t).slideUp("fast", function (e) {
$(".success").slideDown("fast");
}))
: ($(t).attr("data-callback") && pixelTracking(),
$(t).slideUp("fast", function (e) {
$(".error-msg").slideDown("fast");
}));
},
});
}
$(".page.contact form").submit(function (e) {
e.preventDefault(),
window.validateForm(this) &&
(c(this),
$(".page.contact form").hide(),
$(".page.contact .success").show());
}),
it should display after sending the mail to display the success div, so How to solve this without removing e.preventDefault()
You need to sign in to view this answers