0

I have some forms on my website, and I'm using the jquery script below to hide the submit buttons the moment someone clicks on it so that they don't click it multiple times while they wait for the form to submit (the code also replaces it with some "please wait" text). It works perfectly on Desktop, but does not work on mobile at all. Can someone advise as to why this would happen please?

<script>
jQuery(document).ready(function() {
    jQuery('#gform_next_button_5_85', this).click(function() {
        jQuery('#gform_next_button_5_85').css('display','none');
        jQuery('#gform_previous_button_5_85').css('display','none');
        jQuery('.pleasewait').css('display','block');
    });
jQuery('#gform_submit_button_5', this).click(function() {
        jQuery('#gform_submit_button_5').css('display','none');
        jQuery('#gform_previous_button_5').css('display','none');
        jQuery('.pleasewait2').css('display','block');
    });
});
</script>
Shtarley
  • 313
  • 9
  • 22
  • 2
    Are you sure you can 'click' on a mobile device? I would suggest looking into touch events. – Taplar Oct 12 '17 at 19:57
  • 3
    You can use `.on()` to make use of *both* `touch` and `click` handlers at the same time. – Obsidian Age Oct 12 '17 at 20:00
  • Thanks guys, I assume the issue is the the click function - I didn't think of that. @ObsidianAge my jquery knowledge is limited - how would I do this? Would I just replace everything from .click() to .on() instead? – Shtarley Oct 12 '17 at 20:04
  • 1
    @Shtarley -- Essentially yes. You pass through the handlers to [**`on()`**](http://api.jquery.com/on/) like `.on( "click touch", function() {} )`. There's further info [**here**](https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device) :) – Obsidian Age Oct 12 '17 at 20:14
  • try this: `jQuery('#gform_submit_button_5', this).on('click', function() {` You can [read more about on click events here](http://api.jquery.com/on) – crazymatt Oct 12 '17 at 20:14
  • When you say mobile, have you tested on several platforms? Android, iOS? – AlexCode Oct 12 '17 at 20:38

2 Answers2

0

Just replace all the code where you have something like:

jQuery('#gform_next_button_5_85', this).click(function() { /*code*/ });

with something like this:

jQuery('html').on('click touchend', '#gfrom_next_button_5_85', function() { /*code*/ });

I think you have problem on iOS devices, so you must add 'touchend' event.

Joint
  • 1,218
  • 1
  • 12
  • 18
-2

Try the following:

Replace this --> jQuery('#gform_next_button_5_85', this).click(function() {

With this --> $(document).on("click","#gform_next_button_5_85",(function() {

And this --> jQuery('#gform_submit_button_5', this).click(function() {

With this --> $(document).on("click","#gform_submit_button_5",(function() {

Questions:

a) Where do you facing the issue, Android devices, iOS?

b) Are you testing in a real device or on a browser emulator?

AlexCode
  • 655
  • 5
  • 18