CODEWITHSUNDEEP
jqueryajaxjquery-uiios5iphone-web-app
fishbaitfood
fishbaitfood

Reputation: 659

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

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.

Upvotes: 5

Views: 4677

Answers (3)

Matt Fletcher
Matt Fletcher

Reputation: 355

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

Upvotes: 5

adamdehaven
adamdehaven

Reputation: 5920

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?

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

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

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

Upvotes: 3

Related Questions