How can I prevent the Go button on iPad/iPhone from posting the form

Question

I have a dynamic form that is to be displayed using an iPad.

This form has a couple of radio buttons and some text fields and one submit button.

In an iPad the virtual keyboard GO button is supposed to act ad the enter key, causing the first submit button in the form to be clicked and the form to be posted.

To avoid excessive involuntary postings before the form is complete we added an extra submit button higher up in the form, absolutely positioned outside of the visible area with onclick="return false;". This hijacks the enter keystroke preventing accidental posting in every browser except Safari Mobile.

On an iPad we even tested Opera mobile and it works as expected.

But Safari Mobile apparently ignores the return false since event clicking the button causes a post that no other browser does, not even safari on PC.

My questions are

1: Why is safari mobile ignoring "return false" on submit, is there an other mechanism at play here?

2: How can I stop Safari mobile from posting the form when clicking GO?

I have made numerous searches on Google and Stackoverflow and found many examples but all requires a lot of javascript and event binding and the dynamic nature of the form along with user generated content makes this error prone and pretty complex since almost all required binding events to every textbox and textarea.

Any solution that works is good but the simpler the better, especially if it does not require to much customization of the form or events that might conflict with autocomplete or validation events.

Example testpage: http://lab.dnet.nu/ipad.php

Canaille

Answer 1

I found a solution to my problem.

The base to the problem is that Safari mobile ignores onsubmit="return false" on buttons, it only works on forms.

Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting onclick="form.submit()".

Ex.

<form method="post" onsubmit="return false;">
    ... //Other fields here

    <input type="button" value="Send" onclick="form.submit();" />
</form>

The Go button does not trigger a normal button, only submit buttons. Since the form has onsubmit="return false;" it will not post.

The button on the other hand, when clicked triggers the onclick="form.submit();" which overrides the onsubmit on the form.

This solution seems to work in any browser reliably.

Canaille

Answer 2

Better answer is this. The other does not allow you to use a regular submit button. This attacks just the go button.

$("body").keydown(function(){
    if(event.keyCode == 13) {
        document.activeElement.blur();
        return false;
    }
});

Portraitist

This would make break a textbox element making it impossible to enter newlines. Also, it will not be limited to the current form but affect all forms which might not be what you want, but yes, it would in most cases work at least as well. – Bergeron

Answer 3

Seems very unconventional, as this basically breaks general UX and expected device behaviour.

However, I think it also important to mention that this solution relies on the actual <form> DOM element. Meaning the onclick handler on the button should not use a jQuery object to submit but the DOM element.

jQuery object. Does not work:

<input type="button" value="Send" onclick="$("#myform").submit();" />

DOM element. Works:

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />

Without jQuery. Works:

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />

---

Also, here is a similar approach, using jQuery to intercept keyboard submits and only allowing clicks on a button. Credit goes to @levi: http://jsfiddle.net/RsKc7/

Haslett

Well, jQuery is not an option in this situation due to plattform constraints in the server (CMS). And regarding breaking expected behaviour, well, the ipad in this case was used like an infoboot where passers by could answer a form, any one not used to Ipad found it very disturbing that the form was posted when all they where trying to do was to close the keyboard to get to the next field. – Bergeron

Also, as noted, the "behaviour" of safari mobile differes from all other mobile browsers we tested on android and windows pads ;) So in our opinion its the Ipad way that is unexpected, an not one of the 170 people that have used the form has had any comment regarding our solution :D – Bergeron

Answer 4

Here's an additional answer, in case anyone winds up chasing this issue like I did.

Provided you're using jQuery, the following snippet should prevent the "Go" button from triggering a form submission (at least it does on Nexus 7's Chrome on Android 4.2.2; YMMMV). Also, note that if you want to allow the "Enter" key to work on any of the input types below, this will prevent that from happening.

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',     
    function (e) { 
        // Android maps the "Go" button to the Enter key => key code 13
        if (e.keyCode == 13) {
            return false; 
        }
    });

Edit: It seems this bug breaks keyup/keydown in Chrome in Android > 4.3, in which case this fix will no longer work in some circumstances.

Coady

Answer 5

Cannot comment so i have to put a new message.

@David solution works fine if we are using an "input type button"; instead, if we are using a button tag doesn't seems to be solved by David fix.

(env: cordova, ipad mini 2)

Thanks David!

Uno

Does a <button ...> submit the form? If a button does not trigger a submit it will not hijack the GO and will not prevent posting. – Bergeron

Answer 6

Go buttons and return buttons on mobile touch screen keyboards trigger the onclick event of your first submit button. To determine if its the user or script clicking the button, you can use the following:

$('#mybuttonId').onclick(e) {
  if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) {
    //This is the user clicking on the button.
  } else {
    //This is not the user, but a script , do nothing.
    return false;
  }
}

Treadmill