Getting iPhone GO button to submit form
Solution 1
So, here was our specific issue:
We had a form with multiple user input fields, but not a true <input type="submit">
(it was being submitted via JS).
As such, the GO button did nothing.
We then added an <input type="submit">
and set it to display: none
hoping that would do the trick. Nope. Didn't work.
On a whim, we changed display: none to margin-left: -1000px
That worked!
Apparently, Safari is looking for the presence of a SUBMIT button in the form and only if it's not display: none, it will then fire it when you hit the GO button.
Solution 2
If there are more than one inputs and you want to hide the submit, the best seems:
<input type="submit" style="visibility:hidden;position:absolute"/>
Solution 3
You can also bind a keypress listener to the element or form. The iphone "Go" button is the same as the enter button on a computer, char 13.
$('someElem').bind("keypress", function(e){
// 'Go' key code is 13
if (e.which === 13) {
console.log("user pressed Go");
// submit your form with explicit JS.
}
});
Solution 4
I could not work out why a very simple google maps form was not submitting using the iPhone Go button.
Turns out, after stripping it down, it does not work with target="_blank"
on the form tag.
Removed that, and now the Go button works on iPhone.
Here's a JSFiddle to try it
Solution 5
The code given by the others is correct. If you are using jQuery Mobile then add
data-role="none"
to the submit input element. Like so:
<input type="submit" data-role="none" style="visibility: hidden; position: absolute;" />
DA.
Updated on July 09, 2022Comments
-
DA. almost 2 years
Is anyone aware of what variables go into a form to make the iPhones virtual keyboard's GO button submit the form vs. not?
I've been trying to narrow down the scenarios and this is what I've found:
if FORM has only one user input field, go button automatically submits form
if FORM has more than one user input field, but no INPUT TYPE="SUBMIT" then the GO button does not submit the form.
if FORM has more than one user input field AND has an INPUT TYPE="SUBMIT" then the go button does submit the form.
However, that's not completely accurate, as we're running into a situation the 3rd isn't working for us.
Is anyone aware of the other factors that go into the GO button working vs. not working?
-
Tom S. almost 13 yearsWe took the same approach, but instead of margin-left we just pushed it back using z-index and hide it under our graphical button by using some position relative fun.
-
DA. almost 13 yearsIt appears a form with only one input field WILL submit automatically with the GO button...but not if there is more than one input field in the form.
-
Jurgen over 12 yearsTried doing it with
visibilty:hidden;
this works, but obviously the button is then drawn on the screen but not shown... thus taking place and making my form ugly. Setting it toposition:absolute;
andleft:-1000px;
worked for me too -
adriendenat almost 12 yearsBeware of that "off screen" techniques ! With css 3d transforms websites (or websites using perspective etc.) even if the object is NOT display on the screen, the browser calculates it. It causes a (huge) drop down in performance (even on the famous text-indent: -9999px !). So I'll prefer the opacity:0/visibility:hidden solution
-
DA. almost 12 years@Grsmto interesting point! In fact, I think I'm doing this on an iOS app at the moment. I need to double check that it's not rendering when doing the transformations...
-
sidonaldson almost 10 yearsNice solution. Visibility: hidden makes the it not render the item and position absolute hides it but keep it within the page bounds!
-
Alex Schröder over 9 yearsThere's a typo: visibility instead of visiblity.
-
truongnm almost 6 years<input type="submit" style="visibility:hidden;position:absolute"/>
-
mike almost 5 yearsI was about to say, that's silly, why would you ever have that on a form element, then I noticed, that was exactly my issue. I had copy/pasted a form from Mailchimp and it had that attribute on it.
-
Codemonkey about 3 yearsRan into the same problem today. Went with
"position:absolute;left:-10000px"