Stop Double Form Submission Using Jquery and Ajax

Hi Friends, Today i will tell you about how to stop double form submission using jquery and ajax. It is very useful because most of the time our user submit the form more than one time because of refresh page problem.

Today i am using some code of HTML, CSS, Jquery and Ajax to remove the problem of multiple form submits and also get rid of the refresh page problem, when we click on submit button.

For More information about Website Design you can click below:
Pure CSS Button With Lightening Glowing and Shining Effect
Create Expand Collapse Sliding Menu Using jQuery
Background Color Change Automatically Using Jquery
How to add smart slider Facebook Like Box Pop-up
Learn Ajax For Beginners In Hindi
33 New Awesome Features in CSS3 and CSS4
Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners

Stop Double Form Submission Using Jquery and Ajax Live demo:

See the demo and download the code below:

How to Stop Double Form Submission Using Jquery and Ajax:

For preventing multiple form submission you have to follow some steps. These steps are

Step1: Open your code editor.

Step2: Paste the below code.

Html Code:

<h1>Stop Double Form Submission Using Jquery and Ajax</h1>
<form id="frm" method="post">
<div class="input-group">Enter Your Title <span class="title-validation validation-error"></span></div>
<div>
<input type="text" name="title" id="title" placeholder="Your Title" class="input-control" required />
</div>

<div class="input-group">Enter Your Description <span class="description-validation validation-error"></span></div>
<div>
<textarea rows="5" name="description" id="description" placeholder="Your Description" class="input-control" required></textarea>
</div>

<div id="submit-control">
<input type="button" name="butn-submit" id="butn-submit" value="submit" onClick="ajaxSubmit();"/>
</div>
</form>

In the above you can see i have used a heading and form input tag to create a form and use a html validation. On submit button i use a function i.e. ajaxSubmit().




CSS Code:

<style>
body { margin:0 auto; text-align:center; background:#f9f99f;}
#butn-submit{padding: 10px 20px;background: #555;border: 0;color: #FFF;display:inline-block;cursor: pointer;}
.validation-error {color:#FF0000;}
.input-control{padding:10px;width:400px;}
.input-group{margin-top:10px;}
#submit-control{margin-top:15px;}
</style>

Using the above code, i have given some styling to our form.

Jquery and Ajax code:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function ajaxSubmit() {
var valid = true;
valid = checkEmpty($("#title"));
valid = checkEmpty($("#description"));
if(valid) {
var title = $("#title").val();
var description = $("#description").val();
$.ajax({
url: "process-ajax-code.php",
data:'title='+title+'&description='+description,
type: "POST",
beforeSend: function(){
$('#submit-control').html("<img src='LoaderIcon.gif' /> Your Request is Processing!");
},
success: function(data){
$('#submit-control').html("Form submited Successfully!");
}
});
}
}
function checkEmpty(obj) {
var name = $(obj).attr("name");
$("."+name+"-validation").html("");
$(obj).css("border","");
if($(obj).val() == "") {
$(obj).css("border","#FF0000 1px solid");
$("."+name+"-validation").html("Required");
return false;
}
return true;
}
</script>

Using the above code you can apply the validation and also solve the problem of refreshing the page on submit button click. After using the code your user can’t click on submit button after one submission or refreshing the page. the above code stop double form submission using jquery and ajax.

process-ajax-code.php:

<?php
if(!empty($_POST["title"])) {
print "Title: " . $_POST["title"];
}
if(!empty($_POST["description"])) {
print "Description: " . $_POST["description"];
}
?>

Step3: After pasting all the step2 codes you can see your page in the browser like google chrome.

Step4: Enjoy the prevention of double form submission using jquery and ajax.

Read About Other Interesting Things below.

1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
4. Basics of Social Media Optimization Services
5. On Page Search Optimization Services
6. How to Create a Website from scratch for beginners
7. How To Write a Blog for Website and Content Marketing
8. Website Promotion – Need For All Websites
9. Important Things to Think Before Graphic Designs
10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

Categories: Website Design