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

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.