Avoid double click on submit button

[Hugo]

Hi all,

I've checked that sometimes my users click twice on the submit button.
To avoid this I've tried to disable the button after the first click
(it didn't work). Does anyone know how to do this?

My code:

<a href="#" onclick="disable_button(this)" class="submit
whiteButton">Add</a>

function disable_button(button) {

$(button).attr('disabled', 'disabled');
$(button).css('color', 'gray');

}

Thanks.
Best regards,
Hugo

[Ashit Vora]

Try something like this....

$("a.submitButtonId").click(function{

  var self = $(this); //cache the element

  if(self.hasClass("processing")){

    //ignore it

    return false;

  }

  else{

    self.addClass("processing");

    //your code here

   self.removeClass("processing");

  }

});

--
Ashit

[Hugo]

Hi Ashit,

thanks for the help but id didn't work.
If the user clicks twice there still two requests to the server.

Best regards,
Hugo

[brente]

Hmmm. You might also look into the jquery one() function: Attach a
handler to an event for the elements. The handler is executed at most
once per element.
http://api.jquery.com/one/

[Hugo]

Hi,
Thanks but that didn't work also.

I solved this by changing jqtouch.
Using Ashit first suggestion I've added to the submitParentForm
function the following lines:

if($(this).hasClass('processing')){
return false;
}

if($(this).hasClass('a_dblck')){
$(this).addClass("processing");
$(this).css('color', 'gray');
}

and added the class name "a_dblck" to my link:

<a href="#" class="submit whiteButton a_dblck">Add</a>

And now it works.

Does anyone one know if this code can be added to the next jqtouch
version?

Best regards,
Hugo Magalhães

[brente]

Send this as an issue to JStark or the Sencha/jQTouch github:
http://blog.jqtouch.com/submit
http://github.com/senchalabs/jQTouch

Although it's not clear where exactly they want these defects/features
addressed.
Maybe they could say?

[Chrizzel_lu]

Here's a general fix to prevent double clicks in jqtouch pretty much throughout the system:

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery('a.preventdoubleclick').one('click', function() {

jQuery(this).attr("href", "#").click(function() { return false; });

 });

});

</script>

And then just add class="preventdoubleclick" to every href you want to prevent a double click on.

Cheers

[dubayou]

Won't this break if they navigate backwards?

--
From a sea lab deep in the Pacific,
http://w-ll.org

[Chrizzel_lu]

I don't think so but give it a try.

[Chrizzel_lu]

I noticed that the fix did not work for Safari/Chrome on non iOS devices. So therefore here an improved version:

jQuery(document).ready(function(){

jQuery('a.preventdoubleclick').one('click', function() {

jQuery(this).trigger("click");

jQuery(this).attr("href", "#").click(function() { return false; });

 });

});