Question

I currently have a form with a ‘select’ input in it. When the user selects an option, I want the form to submit automatically.

Here’s my current code:

<form method="get">
    <select name="category" data-native-menu="false" onchange="this.form.submit()">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</form>

Currently, when a user selects one of the options, the form is submitted. However, it is submitted without ajax.

So, is there a jQuery Mobile specific function I have to call to get the form to submit via ajax, as forms by default do when they are submitted using a submit button?

---

Edit:

Here’s the solution I found:

<form action='myPage' method="get" id='myForm'>
    <select name="category" data-native-menu="false" onchange="$.mobile.changePage( 'myPage', {type: 'get', data: $('form#myForm').serialize()} );">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</form>

Answer 1

Try something like this to get the FormData object:

var formData = $('form')[0].getFormData()

Alternatively, check out the serialize doc from jQuery’s documentation:

$('form').submit(function() {
    alert($(this).serialize());
    return false;
});

The return false prevents the form submit handler from firing. Instead of alert, do something with the data (stick it in you ajax handler, for example).

Edit:

The OP said the problem was solved by reading this page: http://jquerymobile.com/demos/1.0b3/docs/api/methods.html