Question

I am using <input type="search" /> textboxes in a jQuery Mobile site. JQM provides great functionality right out of the box for these types of fields that I would like to keep, however, I’ve hit a snag.

I have the unfortunate constraint of having to create my mobile site within ASP.NET WebForms. Consequently, all of my markup is wrapped in one uber form element.

Now, when you go to enter text into a search input in Mobile Safari, the iPhone/iPad will present a nifty “Search” button at the bottom of the keyboard. This is handy, however, it appears to perform some sort of HTTP post (or form submit) to the form. Since my form is wrapping everything, JQM returns me to the initial landing page – no matter where I am in the site.

Now to the question… I would like to prevent this submit from occurring and substitute some of my own logic using jQuery. I have tried the following (which does indeed fire), however, the ‘post’ or ‘submit’ continues to go though, despite returning false and preventing default. How does one intercept this event?

// Prevent form posts
$('form').live('submit', function (e) {

    // Custom logic here

    e.preventDefault(); // <-- fires, but does not prevent JQM from returning to landing page
    return false;
});

Answer 1

Try adding data-ajax="false" to the form tag. It sounds like the jQuery Mobile Framework is still hi-jacking the submit event and running its own AJAX submission of the form.

<form data-ajax="false"...

Also you should move away from using .live(). It is depreciated as of jQuery 1.7 and if you are using jQuery 1.6 or greater then you should already be using .delegate().

$('form').live('submit', function (e) {

Changes to:

$(document).delegate('form', 'submit', function (e) {

jQuery Mobile 1.0 is packaged with jQuery Core 1.6.4 but if you move to jQuery Core 1.7 or greater then .on() is the suggested method to bind events. The above event handler declaration can be written using .on() like this:

$(document).on('submit', 'form', function (e) {

Source: http://api.jquery.com/on

Here is a demo: http://jsfiddle.net/KAuFz/