AspnetO

We code, that works!

  • Home
  • Asp.net
  • MVC
  • Interview Questions

Disable Submit Button Once Form Is Submitted Using jQuery

By: Meet Modi | Folls In: Asp.net | Last Updated: Apr 18, 2015

If you want to prevent form submission more than one time after form is submitted, you must need to disable submit button once it’s clicked.

To restrict users to click submit button again and again, we can use the following jquery to disable submit button.

Your Form Declaration

Following is the HTML Markup code for form with submit button:

<form id="form1" runat="server">
       <input type="submit" id="btnSubmit" value="Submit" />
</form>

Disable Submit Button Using jQuery Solution

Following is jQuery function to prevernt form submission once input button clicked to submit form:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript">
       $(document).ready(function () {
               $('input#btnSubmit').on('click', function () {
                       var myForm = $("form#form1");
                       if (myForm) {
                               $(this).prop('disabled', true);
                               $(myForm).submit();
                       }
               });
       });
</script>
You may also like, 100+ Frequently Asked Interview Questions on Asp.net, Top 10 OOPS Concepts in .NET C# with Examples and other more cracking tutorials on Asp.net, JavaScript, jQuery here.

HTML Markup

Following is the complete HTML markup for your .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
       <title>Disable Submit Button To Prevent Form Submission Using jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript">
       $(document).ready(function () {
               $('input#btnSubmit').on('click', function () {
                       var myForm = $("form#form1");
                       if (myForm) {
                               $(this).prop('disabled', true);
                               $(myForm).submit();
                       }
               });
       });
</script>
</head>
<body>
       <form id="form1" runat="server">
               <input type="submit" id="btnSubmit" value="Submit" />
       </form>
</body>
</html>

As you can see from above code, I used $(this).prop(‘disabled’, true); which is the key to disable submit button after form is submitted to server.

Signup Today And Get Latest Tutorials For Free!

Subscribe to us and get free latest tutorials notifications whenever we publish a new contents.

About Meet Modi

Meet is a web developer with having 6+ years of experience. He loves to work on .NET, HTML/CSS, WordPress. He is working as a Software Engineer, plus a Part Time Freelancer.

Share Your Comments & Feedback Cancel reply

Note: To post any code in comment, use <pre>your code</pre>

Social Connections

  • 0 Fans
  • 3,222 Followers
  • 21 Followers
  • 52 Followers
  • 1,559 Subscribers

Top Posts

  • CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
  • Top 10 OOPS Concepts In C# .NET With Examples
  • Parser Error While Deploying Website to Server in Asp.net
  • Asp.net TextBox: How to Get Set TextBox Value or Text in jQuery
  • How to Print Asp.net GridView Data on Button Click using Javascript?

Find by Tags

Ado.net Ajax appSettings Asp.net C# CheckBox CheckBoxList ConnectionStrings Control CSS CSS3 Difference Download DropDownList Export Facebook fadeIn fadeOut fadeTo fadeToggle File File Extension FileUpload Function GridView IIS Interview Questions JavaScript jQuery MVC OOP RadioButtonList RDP Repeater Send Mail Solutions Split SQL Stored Procedure TextBox Upload Validation VB Web.config Web Hosting

The Man Behind AspnetO

Mayank Modi

Hi there,

Myself Mayank Modi, a Full Stack Developer (.NET Stack) and a blogger from Surat, India.

I'm welcoming you to my blog - AspnetO, a programmers community blog where we code, that works!

I started AspnetO as a hobby and now we're growing day by day. We're now having 5000+ programmers that get benefits and learn new things about website design and development under our community blog.

Here at AspnetO, I write about Beginners to Advance level of tutorials on programming languages like Asp.net using C# and Vb.net, MVC, SQL Server, JavaScript, jQuery etc. In sort, all about .NET Framework and website development stuff and sometimes sharing tips and tricks that can help you to grow up your programming skills.

You can get more details about me and my blog at About us page.

Subscribe To Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts right to your inbox

Join 1000+ other subscribers

Hot on AspnetO

Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 7245 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6211 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6207 downloads 39.76 KB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 3056 downloads 1.01 MB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2993 downloads 1.01 MB
Download This Example

Copyright © 2014 - 2019 · All Rights Reserved.replica cartier watches

About | Copyrights | Privacy | Terms | Contact | Advertise | Sitemap
Previous Set Asp.net DropDownList Selected Value in JavaScript
Next Format JSON Date String To Local DataTime Object Using JavaScript