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.

Moneylender

Answer 1

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

Chainplate

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. – Tauro

Answer 2

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

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

Yalonda

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). – Moneylender

Answer 3

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?

Aronoff