Preventing Multiple Submissions on the Client Side using jQuery

Do you want to prevent the user from submitting the form more than once?

To prevent multiple submissions on the client side, you can just disable the submit button so a user cannot click twice. Using the jQuery code below can do the trick.

Disable a button using jQuery

<form class="" action="" method="post">
    <h4>Please enter your name!</h4>
    <p>You are allowed to enter one time only. </p>
    <input type="text" name="usrname" /><br/>
    <input type="submit" value="Submit">
  </form>

*{box-sizing:border-box;}
body{font-family: 'Open Sans', sans-serif; color:#333; font-size:14px; background-color:#dadada; padding:100px;}
input{padding:5px; margin-bottom:5px; width:300px;}

 <script type="text/javascript">
 $("input[type=submit]").click(function(){
 $("input[type=submit]").attr('disabled','disabled');
  $("input[type=submit]").val("Disabled!");
 });
 </script>

Recommended reading