clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How to disable submit button to prevent duplicate form submission on click using jQuery

  Hariom Prajapati
  17 Jul 2022
  JQuery
Imperial Advance Hero Image

How to disable submit button to prevent duplicate form submission on click using jQuery

In this tutorual we will see how to disable submit button to prevent duplicate form submission on click using jQuery.

Some time we working with PHP ,  Laravel , codeigniter or any other frame work and we need to submit any large and big form then due to large form it should take some time to submit form , so user think that button not working or any thing and they click submit buttons multiple time due to which duplicate form is submitted.

So this article help you to disable submit button on click until form will submit to prevent duplicate form  submission .

 

Syntax

$('#takenFormId').submit(function(){
    $("#takenButtonID", this)
      .html("Please Wait.....")
      .attr('disabled', 'disabled');
    return true;
});

 

Disable submit button to prevent duplicate form submission on click using jQuery

<!DOCTYPE html>
<html>

<head>
  <title>Disable submit button to prevent duplicate form submission on click using jQuery</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="Full Name">
    <input type="text" name="email" placeholder="Email Address.">
    <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>