Form submission using jQuery Mobile 1.4.2 remote autocomplete listview?

Question

I have a form that contains several fields, including a remote autocomplete field using a <ul data-role="listview"> like the jQuery Mobile 1.4.2 documentation states. In the desktop view, I'm using an <input> field with jQuery UI autocomplete. I'm getting jQuery validate errors on the <ul> mobile autocomplete field because the <input> field created by jQM doesn't contain the value. I'm using MVC 5 with unobstrusive validation by the way.

This is the jQuery Mobile HTML code I'm using:

<div data-role="page" id="myPage">
    <div id="myFormDiv" class="ui-content" data-theme="a" role="main">
        <form id="myForm" method="post" data-ajax="False" action="/MyController/SetVal">
            <div class="validation-summary-errors">
                <table>
                    <tbody>
                        <tr>
                            <td class="myInput">
                                <ul id="field1" data-role="listview" data-inset="true" data-filter="true"></ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <input type="submit" id="done" name="btnSubmit" value="Done" data-mini="true" data-inline="true" data-theme="a" />
        </form>
    </div>
</div>

I'm handling the form POST myself via JS like this:

$.post($form.attr('action'), $form.serializeArray()) // ... code snipped

I see that the form data for field1 does not appear, since the <input> field created by jQM for the <ul> tag does not contain a value attribute.

Is it possible to do a form submission using jQM 1.4 remote autocomplete listview?

Answer 1

I have solved this by putting a hidden <input> below the <td class="myInput"> tag and setting the value of that hidden input when the listview item is selected.