Disable inputs after submit to avoid double submission using JQuery and Ajax

This tutorial will explain one of the ways to avoid accidental submissions of form using the JQuery and Ajax. While developing the web application this is the most common bug ignored by the newbies.

I will use the JQuery library and the Ajax to accomplish this behavior.

Disable inputs after submit to avoid double submission using JQuery
Disable inputs after submit to avoid double submission using JQuery

Html Code :

<form id="frm1">
     First Name:<input id="fName" name="fName" type="text" />
     Last Name:<input id="lName" name="lName" type="text" />
     Email:<input id="email" name="email" type="text" />
     <input id="submit" name="submit" type="submit" />
</form>

JQuery Code :

$(document).ready(function(){
    $("#frm1").submit(function(){
    //Disable form inputs
    $("input").attr("disabled", true);

    var fName = $("fName").val();
	var lName = $("lName").val();
	var email = $("email").val();

	var dataString = 'fName='+ fName + '&email=' + email + '&lName=' + lName;

    $.ajax({
    type: "POST",
    url: "addUser.php",
    data: dataString,
    success: function(){
    //Enable form inputs after form successfully submitted
    $("input").removeAttr('disabled');
    }
    });
    return false;
    });
});

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *

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