How to disable submit button in jQuery?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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.

$('#myFormId').submit(function(){

    $("#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?

Example:

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
   
<form id="myFormId">
    <input type="text" name="name" placeholder="Name...">
    <input type="text" name="email" placeholder="Email...">
   
    <button type="submit" id="myButtonID">Submit</button>
</form>
   
<script type="text/javascript">
   
$('#myFormId').submit(function(){
    $("#myButtonID", this)
      .html("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
});
   
</script>
   
</body>
</html>

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

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →

Leave a Reply

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

6 + 4 =