iOS web app GO keyboard button doesn't submit Ajax form

Question

I have this iOS web app, that needs to submit a form through Ajax, which works for the most part. The only thing that isn't working is that the GO button on the keyboard doesn't respond.

On desktop browser, everything works for submitting (submit button, or enter key)

On Safari iOS, everything works fine too (submit button, GO keyboard button)

But when using it as a Web App on iOS, the GO button doesn't work!

What could cause this behaviour? An iOS web app still uses Safari as far as I know... :)

<form id="myForm" name="form" action="link-to-script.php" method="post">
<table>
    <tr>
        <td><input id="name" name="name" type="text" size="20" maxlength="25" /></td>
    </tr>
    <tr>
        <td><input id="email" name="email" type="text" size="20" maxlength="50" /></td>
    </tr>
    <tr>
        <td><input type="submit" name="Submit" value="Send" /></td>
    </tr>
</table>

$('#myForm').submit(function(e) {
    e.preventDefault();  // Doesn't matter
    var dataString = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "http://link-to-script.php?",  // Valid link for the use of this form
        cache: false,
        data: dataString,
        success: function() {

        }
    });
});

UPDATE (SOLVED): I've removed the preventDefault() again. It wasn't bottlenecking me, but I don't like unneccessary code. :)

When I added return false; at the bottom of my $('#myForm').submit(function() {, everything worked like I wanted it to.

iOS GO button, Enter, and Submit button all respond now.

score 5 · Answer 1 · answered Feb 23 '15 at 16:56

5

I've discovered that adding a target="_blank" to a tag will break the Go button on the iOS keyboard.

answered Feb 23 '15 at 16:56

Matt Fletcher

345
3
15

1

Its almost 2019 and I'm experiencing the same issue. I've found that any `target` attribute in the `form` tag will cause the GO button not to submit the form. I was trying to track down why a mailchimp form wasn't working correctly in iOS safari and this was the issue. – TheRightChoyce Dec 21 '18 at 16:27

score 3 · Answer 2 · answered Aug 24 '12 at 12:10

3

Have you tried hooking to "Done/enter" button:

$("#myForm input").live("keyup", function(evt) {
  if (evt.keyCode === 13) {
    $("#myForm").trigger("submit");
  }
});

answered Aug 24 '12 at 12:10

Samuli Hakoniemi

18,740
1
61
74

Thanks, but if I place that code before my form submit code, it won't make a difference. It's weird that it DOES work when viewed inside the Safari app (even without your piece of code), but not when using it as a web app (added to home screen). – fishbaitfood Aug 24 '12 at 13:14

score 0 · Answer 3 · answered Aug 30 '12 at 22:59

Provide the full URL for your form action in the form, or don't submit via JS. you have two form actions set up for the same form - one in the form action without the full URL, and a second in your Ajax submission.

Also, why are you preventing the default form action with your JS?

iOS web app GO keyboard button doesn't submit Ajax form

3 Answers3