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
Leave feedback about this