How to prevent double form submission

In this quick post i am going to tell you a very important issue which we faces every time we create a widely used form for our applications, You may have faced this issue with your applications form too. Because of this issue you may get duplicate entries in your database.

So here i’ll show you how to prevent your form from double submission. All you need to do is apply a few line jquery after clicking on submit button or form submit event.


For Normal Form

Suppose you have a contact us form

<form id="fm" action="">
Name: <input type="text" placeholder="Name"><br/>
Email: <input type="email" placeholder="Email"><br/>
Message: <textarea placeholder="Name"></textarea><br/>
<button id="sub">SUBMIT</button>	
</form>

And you need to disable submit button while form submit action apply. then you need to apply some jquery on form. But make sure you have already added jquery library on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Finally apply some action whenever user perform form submit event, add disabled attribute on submit button on form submit action.

<script>
$(function(){
  $("#fm").submit(function(){
     $("#sub").html("Submitting please wait...");
     $("#sub").attr('disabled','disabled');
     //$("#sub").removeAttr('disabled');
  });
});
</script>

Jquery Ajax Form

In the case of ajax form you can completely remove the the submit button and add loading image.
And If you get any response from server side again show submit button and hide loading button.

Form

<form id="fm" action="">
Name: <input type="text" placeholder="Name"><br/>
Email: <input type="email" placeholder="Email"><br/>
Message: <textarea placeholder="Name"></textarea><br/>
<button id="sub" type="button">SUBMIT</button>
<div style="display:none;" id="loading"><img src="ajax-loader.gif">Submitting please wait...</div>	
</form>
<script>
$(function(){
 $("#sub").click(function(){
      var formData = $(this).serialize();
       $.ajax({
          url: "request.php",
          dataType: "json",
          data: formData,
          beforeSend:function(){
			$("#sub").hide();
			$("#loading").show();
		  },
          success: function( data ) {
            $("#sub").show();
            $("#loading").hide();
          },
          error: function (error) {
	    $("#sub").show();
            $("#loading").hide();
                console.log(error);
		  },
          timeout: 30000  
        });
  });
});
</script>

DEMO

DOWNLOAD



I hope you might have understand the point so far. This little code may prevent your database from duplicate entries.

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

4 Replies to “How to prevent double form submission”

  1. Hi Rohit,
    nice post, but I just want to bring your attention on Jquery Ajax Form: “beforeSend” This is an Ajax Event, A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc.
    Also need to specify “error” ajax event because there is possibility request is not complete successfully and come up with the server side error so you have “error” ajax event to specify the same.

    Here is the example of the same:

    $(function(){
    $(“#sub”).click(function(){
    var formData = $(this).serialize();
    $.ajax({
    url: “request.php”,
    dataType: “json”,
    data: formData,
    beforeSend:function(){
    $(“#sub”).hide();
    $(“#loading”).show();
    },
    error: function (error) {
    $(“#sub”).show();
    $(“#loading”).hide();
    // Show Error Message
    $(“#errorId”).html(error).show();
    },
    success: function( data ) {
    $(“#sub”).show();
    $(“#loading”).hide();
    },
    timeout: 30000
    });
    });
    });

    Please dont get me wrong I am just share my thoughts and comments with you please correct me if Am I wrong or suggest me with your solution.

  2. sir,
    i want complete code of ecommerce website in php with database,as i am learning i need your help

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.