We help IT Professionals succeed at work.

jQuery to disable submit button when submitted isn't working..??

Andrew Angell
on
I'm having an issue with some duplicate orders on my website, and I'm able to reproduce it by clicking on the submit button more than once to complete the checkout on my site.

As such, I'm trying to disable the button once you've submitted it so you can't process duplicate orders by being impatient.

If you go here:  http://sandbox.usbswiper.com/usbswiper-usb-magnetic-stripe-credit-card-reader.html

Just add that to the cart and go through a CC checkout.  It'll actually fill everything in for you so it's really quick.   Just check that shipping is the same as billing and you won't have to type anything.

When you to the checkout-review.php page, this is where the problem is.  There's a big COMPLETE PAYMENT button that can be submitted multiple times.

I've attached the short jQuery that I'm using to try and solve this problem.  It doesn't seem to be working, though, because I can still submit duplicate orders.

Any information on how to make this work would be greatly appreciated.  Thanks!
<script type="text/javascript">
$('#checkout_review').submit(function(){
	$('input[type=submit]', this).attr('disabled', 'disabled');
});
</script>

Open in new window

Comment
Watch Question

$('#checkout_review').submit(function(){
      $(this).attr('disabled', 'disabled');
});
$(this).attr('disabled', true);
Andrew AngellCo-Owner / Developer

Author

Commented:
Ok, now I've got the attached, based on what I think you're saying..??  It's still not working, though.
$('#checkout_review').submit(function(){
      $(this).attr('disabled', true);
});

Open in new window

Commented:
Try this

<script type="text/javascript">
$('#checkout_review').submit(function(){
        $('input[type=submit],input[type=image]', this).attr('disabled', 'disabled');
});
</script>

Open in new window

Andrew AngellCo-Owner / Developer

Author

Commented:
chaituu:

That first one is the exact sample I pulled from.  ;)
Andrew AngellCo-Owner / Developer

Author

Commented:
StingRaY:  That looked promising, but that doesn't seem to do it either.
tell me one thing;


are your getting alert when you click submit button.

 $('#checkout_review').submit(function(){

alert("abcd")
      $(this).attr('disabled', true);
});

for form submission you need to use submit;but in your case i think need to use click and then disable the submit button

$('#checkout_review').submit(function(){
        $('input[type=submit],input[type=image]', this).attr('disabled', 'disabled');
});
$('#checkout_review').click(function(){
        $('input[type=submit],input[type=image]', this).attr('disabled', 'disabled');
});
Andrew AngellCo-Owner / Developer

Author

Commented:
chaituu:

Nope.  FireBug shows that jQuery is loaded, though.  Not sure why it's not firing..??
are your getting alert

$('#checkout_review').submit(function(){

alert("abcd")
      $(this).attr('disabled', true);
});

Andrew AngellCo-Owner / Developer

Author

Commented:
No, that's what I meant.  I'm not getting the alert, so it seems that jQuery isn't running.  I'm not sure why that would be, though.
check whether alert is coming in  this case.

$('#checkout_review').click(function(){

alert("abcd")
       $('input[type=submit],input[type=image]').attr('disabled', 'disabled');
});

Andrew AngellCo-Owner / Developer

Author

Commented:
Nope.  Nothing.
check whether checkout_review id was there in your form.
alert($('#checkout_review').length)

$('#checkout_review').live('click',function(){

alert("abcd")
       $('input[type=submit],input[type=image]').attr('disabled', 'disabled');
});

Andrew AngellCo-Owner / Developer

Author

Commented:
Ok, yes, the moment the page loads now I'm getting an alert with a 0 in it.  Also, now, when I click on the submit button I am getting an alert that abcd.  And...it also seems to be disabling the button, too.

What changed?  And why doesn't it work outside of an alert?
alert($('#checkout_review').length)

if length comes as 1 i.e. the id exists in the form.

you mean after changing from click function to live funtion its working .
Andrew AngellCo-Owner / Developer

Author

Commented:
The alert comes back with a 0, but I can clearly see the form id checkout_review in my code and when I view source...

<form id="checkout_review" action="proc/cc-checkout-processor.php" method="post" >
Andrew AngellCo-Owner / Developer

Author

Commented:
When we did this...

alert($('#checkout_review').length)

$('#checkout_review').live('click',function(){

alert("abcd")
       $('input[type=submit],input[type=image]').attr('disabled', 'disabled');
});

That seemed to have worked.  But then I tried this...

$('#checkout_review').live('click',function(){
      $('input[type=submit],input[type=image]').attr('disabled', 'disabled');
});

And that didn't work.
both codes you  pasted seems to be same.
Andrew AngellCo-Owner / Developer

Author

Commented:
I know, but one is an alert and the other is not.  That's what confused me.  I'll play with these again and see if I did something stupid.  
iGottZFrontend Engineer

Commented:
$("#checkout_review").submit(function(e){
    e.preventDefault();
});

Open in new window


derp.
iGottZFrontend Engineer

Commented:
try this and you will be happy:
jsfiddle.net/apLyJ
Andrew AngellCo-Owner / Developer

Author

Commented:
iGottZ:  That snippet you gave me doesn't seem to be working for me either.

chaituu:   This actually does seem to be working for me...

$('#checkout_review').live('click',function(){
      $('input[type=submit],input[type=image]').attr('disabled', 'disabled');
});

Is there something wrong with using live vs. click/submit?  Any idea why that would work when the others aren't?
iGottZFrontend Engineer

Commented:
you did went to my link and tryed it there dont you?
there is another snipet.
Frontend Engineer
Commented:
may i post it here so everyone can see it without opening that url:

$('#checkout_review').one("submit", function (e) {
    alert("submit");
    $(this).submit(function (e) {
        alert("already submited");
        e.preventDefault();
    });
    e.preventDefault(); // remove this
});

Open in new window


or:

$(function () {
    $('#checkout_review').one("submit", function (e) {
        alert("submit");
        $(this).submit(function (e) {
            alert("already submited");
            e.preventDefault();
        });
        e.preventDefault(); // remove this
    });
}

Open in new window

(in case you need it on dom ready)
Andrew AngellCo-Owner / Developer

Author

Commented:
iGottZ:  I'll give it a shot.  This other snippet is working in FireFox but not IE.
Andrew AngellCo-Owner / Developer

Author

Commented:
Doesn't seem to be working.  Still able to submit it multiple times.
Andrew AngellCo-Owner / Developer

Author

Commented:
Looks like I'm still on jquery 1.4.3.  Is that my problem?
"Is there something wrong with using live vs. click/submit?  Any idea why that would work when the others aren't?"

you use live/on function when you try to click dynamically added button/link.
if you are using the latest version of jquery then use the on() event handler to attach a click listener, or if an older version of jquery use live().



http://api.jquery.com/on/
http://api.jquery.com/live/

Andrew AngellCo-Owner / Developer

Author

Commented:
Well, after all this, I looked up a quick, old-fashioned javascript method of handling this...

<form onsubmit="document.getElementById('submit').disabled = 1;" ...>

That's working perfectly for me.
document.getElementById('submit').disabled = true;
iGottZFrontend Engineer

Commented:
strange.. this works even with jquery 1.3.2

http://jsfiddle.net/apLyJ/2/