How can I make an existing AJAX form be iPhone compatible?

Question

I was recently informed that my shopping cart application breaks when viewed in Mobile Safari (iPhone, iPod Touch). The "add to cart" forms use the 'progressive enhancement' approach to support AJAX updates using jQuery. Some quick testing showed that the functionality indeed works with JavaScript disabled. Everything I've read so far indicates that the iPhone does not support the "form.onsubmit" event, which is what I'm currently binding to with jQuery to initiate the AJAX transaction.

Can I make modifications to add iPhone support without doing any browser detection, or serving alternate scripts?

The current form template:

<form method="post" action="" class="my-cart">
    <fieldset>
        ...
        <input type="submit" name="my-button" value="add to cart" />
    </fieldset>
</form>

And the script event:

$('form.my-cart').submit(function(){
    ...
});

I've had great success with this in terms of browser support (most browsers support the AJAX/JavaScript, but all others - except iPhone - will fall back to regular form submission, etc.. etc..). I'd like to support AJAX function in the iPhone, however I will settle for bypassing the JavaScript. As is, the iPhone simply does nothing upon clicking the submit button.

Answer 1

I've used the jquery forms plugin (http://jquery.malsup.com/form/) on the iphone using the ajaxSubmit function and it worked great:

$('form.my-cart').ajaxSubmit(function(){
    ...
});

Answer 2

Justin,

You can check Malsup's latest plugins in here. You can see the example about how to bind the form to this plugins. There are 2 way to do it, either using ajaxSubmit(), or the simple ajaxForm().

If you using ajaxSubmit(), then yes, you must do it manually, handle the submit button click event and call the method. Try using ajaxForm(), the plugins do all the necessary bind for you. Everytime the form submitted, the plugins automatically handle it, so you don't have to handle submit button click event by yourself.

If you think that this plugins code heavy, what make you think of it? This plugins can handle all type of standard form, see the test here. It working better than other plugins to handle various type of form field. The plugins also provide various method to get the field's value, such as: formSerialize()

Answer 3

Thanks to both responders. The problem turned out to be a conflict with some other, partially related code. The form itself was working, but the event was not being called because the aforementioned code was somehow preventing the triggering of the submit event.

Answer 4

Hi there, in case other folks see this post in the future (just like me), there's another simple workaround here. You can catch the click event on the form's submit button and then AJAX submit the form values... Quick and easy.