CODEWITHSUNDEEP
phpjquerypost
Jordan Lovelle
Jordan Lovelle

Reputation: 53

Disable submit button on click but after submission jQuery / PHP

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.

Upvotes: 1

Views: 718

Answers (4)

Prabhu Murthy
Prabhu Murthy

Reputation: 9261

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');

Upvotes: 1

developernaren
developernaren

Reputation: 514

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();
});

Upvotes: 1

Ezekiel Victor
Ezekiel Victor

Reputation: 3876

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...');
});

Upvotes: 1

underscore
underscore

Reputation: 6877

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;
    });

Upvotes: 3

Related Questions