单击时禁用提交按钮，但是在提交jQuery / PHP之后

Question

At the moment I'm working on a project that requires the submission of a form for 'voting' for specific posts. At the moment clicking on the submit button works as it should, although if the button is clicked more than once, it does exactly that - submits the POST variables more than once causing them to be able to 'vote' for the item multiple times in one set of clicks.

I've looked at every jQuery code example I can find to solve this but nothing works. It works to disable the button, but after that the redirection page that grabs the data and runs the queries returns an error as nothing has been submitted. In short, it seems to disable the button but at the same time disable the information from being submitted.

Here's my jQuery code:

$('#vote').submit(function(){
    $(this).children($btn).attr('disabled', true);
    return true;
});

Any help would be great. Thanks.

Answer 1

Use jquery .one

Description: Attach a handler to an event for the elements. The handler is executed at most once per element.

 $(document).one("click","#vote",function(){
        $(this).children($btn).attr('disabled', true);
        return true;
    });

Answer 2

Probably your best option is to only allow a single submission and adjust the button appearance some other way:

var submitted = false;
$('#vote').submit(function(){
  if(submitted) {
    // cancel additional submits
    return false;
  }

  submitted = true;
  $(this).children($btn).val('Please wait...');
});

Answer 3

Jquery's on and off can be used here.

for example after submission,you can completely disable the click by

$('#vote').off('click');

and then switch it back if you want by

$('#vote').on('click');

Answer 4

you could add an click event . Instead of using submit button use a button click event.

the code might look like this

$($button).click(function(){
$(this).attr("disabled","disabled");
$($form).submit();
});