JavaScript button no longers works on mobile

Question

So I'm troubleshooting an issue in our app and can't figure it out. I haven't written the base code and can only inject CSS and Javascript. There's a very basic span element with an ID, below that is a snippet of Javascript basically saying "if element with ID submitButton is clicked, submit form #createForm". However, on mobile it's broken and the browser is not giving any errors.

<form method="post" action="page.html" id="createForm">
    <span id="submitButton">Submit form</span>
</form>
<script> 
    $("#submitButton").on("click", function (event) {
        if (attributeEqualsDisabled($(this).attr('disabled'))) {
            return true;
        }
        $("#submitButton").attr('disabled', true);
        $('#createForm').submit();
    });
</script>

Now, this works perfectly on desktop browsers, even when using the "display as iphone" mode Chrome has. You can click the button, everything works.

However on mobile safari and when adding the page as a webapp the button no longer works. When you press it the page just scrolls to the top and does nothing. I've checked it out through my Mac and everything seems normal and exactly the same as on desktop. I can even run $("#submitButton").click(); on my iphone through the console and it functions perfectly.

There are no errors or warnings in the console. Does anyone have any suggestions to troubleshoot this? I sadly can't give direct access to the code because everything is on an IP locked server.

Is there any way of seeing exactly what happens when I click the button? I've tried the "Timelines" tab but that shows nothing when I press the button.

I've had similar problems on iOS with `click` events - and this thread came to my rescue: https://stackoverflow.com/questions/3025348/how-do-i-use-jquery-for-click-event-in-iphone-web-application. In particular try setting CSS `cursor: pointer;` over the submit button. — Robin Zigmond, Oct 03 '18 at 13:47
@RobinZigmond You are a lifesaver, worked like a charm. Thank you! — s1h4d0w, Oct 03 '18 at 15:27
Thanks, but just passing on answers which had saved me the same frustration not too long ago! :D — Robin Zigmond, Oct 03 '18 at 15:39

s1h4d0w · Accepted Answer · 2018-10-03T21:05:04.113

This answer by another user fixed it: https://stackoverflow.com/a/3026621/3461722

Thank you to Robin Zigmond for pointing me in the right direction. I was thinking that something was preventing the click event from firing, but it was simply not picking up on it because I needed to track the touchstart event.

The linked answer does mention that a better solution was found by adding cursor:pointer; to the button with CSS, however my element already had that so it obviously didn't work in this case.

Add this function to detect the taps on mobile:

$('#submitButton').bind( "touchstart", function(e){
    if (attributeEqualsDisabled($(this).attr('disabled'))) {
        return true;
    }
    $("#submitButton").attr('disabled', true);
    $('#createForm').submit();
});

JavaScript button no longers works on mobile

1 Answers1