Jquery issue with waiting button on submit

Hello there ,

i need help on jQuery

i have form that i want submit button to be disabled after click to prevent resubmission

<script>
$(function()
{
  $('#theform').submit(function(){
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });
});
</script>

It works all fine if the form is filled correctly!

Problem is if some of validation inputs is not filled button just stays as “Please Wait…”

what should i change so it let submit again if validation error was in form?

class error is enabled when there is validation error (labels colors red on submit button click)
Thanks

Don’t disable the submit button, if the form is not valid.

On the other hand side, you can leave out the JavaScript completely, if after the form processing (on the server) you make a redirect to the following page.

Users makes double clicks and form submits multiple times !That is why i need it

You can use one() method as the following code:

$(function()
{
 $("input[type='button']").one('click',function(e){
   if(($("input[type='text']").val())!=''){
   $('#theform').submit();
   $("input[type='button']").val('Please wait....');
     e.preventDefault();
   }else{
     alert('empty input');
   }
 });
});

that would fail (with regards to disabling) on the second submit. And it would fail if the invalidity is not caused by a text field.

1 Like

And another way using the setTimout():

$(function(){
 var flag=true;
 $("input[type='button']").on('click',function(e){  
   if(($("input[type='text']").val())!='' && flag===true){
   $("input[type='button']").val('Please wait....');
   flag=false;
    setTimeout(function(){
      $('#theform').submit();
      $("input[type='button']").val('submit');
      flag=true;
     },1000);       
     e.preventDefault();
   }else{
     alert('empty input');
   }
 });
});

ok Thanks will test that ASAP

Something is not as should be!Please wait in not happening :frowning:

I modified my code to

  $(document).on('submit','#theform',function(){
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });

And it works , but how to make it run from a link click?
and change link text on submit “Please wait…”?

Try with this:

$(function(){
 var flag=true;
 $("input[type='button']").on('click',function(e){  
   if(($("input[type='text']").val())!='' && flag===true){
   $("input[type='button']").val('Please wait....');
   flag=false;
    setTimeout(function(){
      $('#theform').submit();     
      flag=true;
     },1000);       
     e.preventDefault();
   }else{
     alert('empty input');
   }
 });
});
1 Like

The double-submission should not be a problem if the validation is failing, it wouldn’t be able to submit I presume!

So double-submission is only a problem for when the form submits properly?

I get the feeling this entire flow is just not happening in the right way.
Typically when a form submits, it will refresh to the submission page with the POST, which then refreshes back to the first page (or somewhere). In other words, the page refreshes immediately when submitted.

If you aren’t doing it this way, and are using ajax or something, then that should have a success/fail flow within it. You should be able to check whether the ajax worked or not and process from there.

I don’t see either type here. You are focusing on the submit button itself rather than on the actual form processing logic.

Double submission should not even be a problem. On the very first submit it should fail validation or be submitted. And if it fails, it naturally won’t be submitted (thus no double submission possible), or it will be a success. And when a form is successfully submitted, it would either refresh the page (creating a new blank form) or you would have access to the ajax processing logic in order to reset the form on successful submission.

If users are allowed to just keep pressing Submit and successfully recording the exact same form over and over, then something isn’t programmed right and it doesn’t have to do with disabling the Submit button!

If all you want to do is prevent super fast double-clicking of the Submit button, then I would just do the timeout technique. Immediately disable the button on first click, but set a timeout of a second or two and enable it again.

1 Like

If the form submission is entirely AJAX-driven, you could disable the button on submit, and just enable it again when an error occurs:

var form = $('#theform')
var submit = $('[type=submit]', form)

form.submit(function (event) {
  event.preventDefault()
  submit.prop('disabled', true)

  $.ajax({
    method: 'POST',

    url: form.prop('action'),
    
    data: form.serialize(),

    success: function () {
      // Do something like showing
      // a success message
    },

    error: function () {
      // Show an error message and set
      submit.prop('disabled', false)
    }
  })
})

Of course, the same would work for client side validation as well… just instead of sending the data to the server directly, you’d process it with a validator first.

@liontas76 I tried it but it says empty input all the time

@zack1 i have simple form bit PHP and it does redirect and die(0) but on save without any protection user send outs double message on for multiple clicks

@liontas76
I have other solution that works
but i do not know to make it to be disabled only for like 10 seconds

here are js

<script> 
   function clickAndDisable(link) {
     // disable subsequent clicks
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   
</script>

Use setTimeout().Inside make a function that remove disabled attr and set time 10000

i m trying that for hours but its not unseting :frowning:

Also to note this is for a tags

<script>
$(function()
{
  $('#theform').submit(function(){
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });
});
</script>

This is your original code. Create a little function that does the timeout. Call this function before return true;. When the function runs, check for the “class error” that you mentioned because this will let you know if it was validation. So now the code might look like this:

<script>
$(function() {
  $('#theform').submit(function(){
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
      enableTimer();
      return true;
  });
});
function enableTimer() {
  windows.setTimeout(function() {
    if($('#someelement.errorclass').length > 0)) {
      // Error class detected, turn button back on so they can try again
    } else {
      // check here for a success condition and do something if needed
    }
    // It's possible the form submission hasn't finished yet in 1.5 seconds so other tests may be necessary
  }, 1500);
}
</script>

This is untested code, it’s just for giving an idea of what I was thinking you could do. Essentially, set the timeout, but then test for an error condition or success condition before changing the submit button again.

Be mindful where you create and how you call the timeout function to make sure it’s in scope with your other functions.

If you have access to the ajax function that is submitting the form, you should run some of this processing from the success and fail, always events within that call.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.