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.
Form submission using jQuery Mobile 1.4.2 remote autocomplete listview?
-
04-07-2023 - |
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?
La solution