jQuery Mobile - how do I submit forms to a URL and transit to another page inside the DOM?

Question

in the jQuery mobile example. The page that will be displayed after a form is submitted is the same as where the form will be POST-ing/GET-ing to.

Is it posible to submit forms to a URL and transit to another page inside the DOM?

Answer 1

You can add an event handler for the submit event for the form and submit the form manually, then manually transition to whatever page you want.

$(function () {
    $('#form_id').bind('submit', function (e) {
        e.preventDefault();
        $.post('path/to/file.php', $(this).serialize(), function (response) {
            $.mobile.changePage('#page_to_goto', {transition: 'slide'});
        });
    });
});

Some Notes:

• You may need to turn-off AJAX handling of the form by adding data-ajax="false" to the form tag.
• e.preventDefault() stops the form from submitting normally, a return false; at the end of the event handler should do the same thing.
• $.post - http://api.jquery.com/jQuery.post/
• .serialize() - http://api.jquery.com/serialize/
• $.mobile.changePage() - http://jquerymobile.com/demos/1.0rc1/docs/api/methods.html