Home Html How to disable submit button in jQuery?

How to disable submit button in jQuery?

by Shahriar Sagor

Hello Devs
Today again I am come with a new tutorial. This is a very small post, here i will teach you how to disable submit button on click to prevent to multiple form submits in jquery. We can easily stop duplicate form submission by using jquery. We can easily disable submit button on click event in jquery for prevent duplicate form submit.

When we are working with php or any framework like laravel codeigniter or others you used form with one submit button. When we have large and big form then it maybe takes long time to submitting process .In this time maximum user will click many times but actual form submit again and again.

So that time we must have to prevent multiple form submits like prevent double click on submit button. So here we know how we can prevent this. We can do this with by using jquery. When we click on submit button than it should be disabled so we cannot click again.

Here i written a very example for that, we can use bellow php file. You can get full code on bellow. We can also check this small jquery code and full code.


    $("#myButtonID", this)

      .html("Please Wait...")

      .attr('disabled', 'disabled');

    return true;


Here is a full example, you can see.

Read Also : How to Convert Object to String in Javascript?


<!DOCTYPE html>
    <title>jQuery disable submit button on click to prevent multiple form submits - Codingspoint.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form id="myFormId">
    <input type="text" name="name" placeholder="Name...">
    <input type="text" name="email" placeholder="Email...">
    <button type="submit" id="myButtonID">Submit</button>
<script type="text/javascript">
    $("#myButtonID", this)
      .html("Please Wait...")
      .attr('disabled', 'disabled');
    return true;

I hope it can help you. Also you can follow us on Facebook


You may also like

Leave a Comment