<form action="contact.php" method="post" id="contact_form" name="contact_form">
<h3 class="text-center mb-4 sub-header" id="contactus" style="color:#2070c0;">CONTACT US</h3>
<div class="form-group row">
<label class="col-sm-3 col-form-label">SUBSCRIPTION NO</label>
<div class="col-sm-9">
<input type="text" class="form-control phone-group text-ft" id="subscriptionNumber"
aria-describedby="subscriptionNumber" placeholder="Subscription Number"
name="subscriptionNumber">
</div>
</div>
<div class="form-group row required">
<label class="col-sm-3 col-form-label">LAST NAME</label>
<div class="col-sm-9">
<input type="text" class="form-control phone-group text-ft" id="lastname"
placeholder="Last name" name="lastname">
</div>
</div>
<div class="form-group row required">
<label class="col-sm-3 col-form-label">FIRST NAME</label>
<div class="col-sm-9">
<input type="text" class="form-control phone-group text-ft" id="firstname"
aria-describedby="firstname" placeholder="First name" name="firstname">
</div>
</div>
<div class="form-group row required">
<label class="col-sm-3 col-form-label">MOBILE NO.</label>
<div class="col-sm-9">
<input type="text" class="form-control phone-group text-ft" id="mobileno"
placeholder="Mobile No" name="mobileno">
</div>
</div>
<div class="form-group row required">
<label class="col-sm-3 col-form-label">EMAIL</label>
<div class="col-sm-9">
<input type="text" class="form-control phone-group text-ft" id="email" placeholder="Email"
name="email">
</div>
</div>
<div class="form-group row required">
<label class="col-sm-3 col-form-label">SUBJECT</label>
<div class="col-sm-9">
<input type="text" class="form-control phone-group text-ft" id="subject" placeholder="Subject"
name="subject">
</div>
</div>
<div class="form-group row required">
<label for="message" class="col-sm-3 col-form-label">MESSAGE</label>
<div class="col-sm-9">
<textarea class="form-control" placeholder="Message" id="message" rows="5"
name="message"></textarea>
</div>
</div>
<span>
<?php
if(isset($_GET['contact'])){
if($_GET['contact']=="success"){
echo '<h5 class="text-success text-center">Mail sent successfully</h5>';
}
if($_GET['contact']=="failed"){
echo '<h5 class="text-danger text-center">Mail not sent. Please try later.</h5>';
}
}
?>
</span>
<div class="row">
<div class="col-sm-12 text-center">
<button type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';" id="submitButton" class="btn btn-primary btn-ft" value="submit">SUBMIT</button></div>
</div>
</form>
<script>
$("#contact_form").validate({
rules: {
subscriptionNumber: {
required: false
},
lastname: {
required: true
},
firstname: {
required: true
},
mobileno: {
required: true
},
email: {
required: true
},
subject: {
required: true
},
message: {
required: true
}
},
messages: {
"subscriptionNumber": {
required: "Subscription number is required"
},
"lastname": {
required: "Lastname is required"
},
"firstname": {
required: "Firstname is required"
},
"mobileno": {
required: "Mobile number is required"
},
"email": {
required: "Email is required"
},
"subject": {
required: "Subject is required"
},
"message": {
required: "Message is required"
}
},
submitHandler: function (form) {
console.log(form);
form.submit();
}
});
</script>
When I disable submit button after submitting form to prevent from double click. jquery validation is not working. please give me a suggestion.
disable code:
<input id="btnSubmit" type="submit" onclick="this.disabled = true">
Advertisement
Answer
You should disable the button after the form has been submitted.
$("#contact_form").validate({
rules: {
subscriptionNumber: {
required: false
},
lastname: {
required: true
},
firstname: {
required: true
},
mobileno: {
required: true
},
email: {
required: true
},
subject: {
required: true
},
message: {
required: true
}
},
messages: {
"subscriptionNumber": {
required: "Subscription number is required"
},
"lastname": {
required: "Lastname is required"
},
"firstname": {
required: "Firstname is required"
},
"mobileno": {
required: "Mobile number is required"
},
"email": {
required: "Email is required"
},
"subject": {
required: "Subject is required"
},
"message": {
required: "Message is required"
}
},
submitHandler: function (form) {
console.log(form);
form.submit();
$('#submitButton').prop('disabled', true)
}