Question

I’m trying to submit a form when a select changes using jQuery Mobile. I have no requirements on what the select element looks like. But I do require that the form is submitted without ajax. This is the code that I have:

<form name="langform" method="post" data-ajax="false">
    <select name="syslang" id="chooseLang" data-mini="true" onChange="this.form.submit()">
        <options />
    </select>
</form>

Now this works for iPhone, but when I try it on Android the select menu doesn’t show up. When I add data-native-menu=”false” to the select, the select menu shows up and works on Android, but the form doesn’t get submitted on iPhone.

I should mention that I’m using jQuery Mobile 1.1.0 and jQuery 1.7.1

All I need is to have it submit properly on both devices. Can anyone help with this?

Answer 1

So I found the solution to my problem. I just wanted to share it in case anyone else ran into this issue. Apparently jQuery Mobile 1.1 has issues with form elements in fixed containers (using position: fixed) specifically with Android 2.2 and 2.3, as referenced here http://jquerymobile.com/demos/1.1.0/docs/forms/docs-forms.html.

So you can’t use a fixed position footer and a form element within it.