Question

所以我有一个项目我正在处理有form的地方占据了我页面上的整个data-role="content"部分。我在内容部分中有一个input。我的内容部分中还有一个jQuery Mobile弹出窗口，其中包含input。我试图使用一个表单提交来收集内容部分输入中的数据和弹出内部的输入。

原始HTML看起来正确，直到DOM加载，然后我注意到jQuery Mobile将弹出窗口移动到内容部分之外。这使得当我提交表单时，弹出窗口内的输入不会与post请求一起发送。它只从我的内容部分的第一个输入发送输入数据。

我已经看到了一些可能的修复，但它们似乎不适用于我的示例中的jQuery Mobile面板。

之前有没有人遇到这种情况？有工作吗？

这是我的代码和一个有点工作的例子：

JSfiddle（无法弄清楚如何在JSfiddle上发布数据）

<div data-role="page" id="page1">

<div data-role="panel" id="mypanel" data-display="reveal" data-position="right">
    <form action="index.php" method="get" data-ajax='false'>
        <label for="filter1">filter1:</label>
        <input type="text" name="filter1"/> 
        <input type="submit" value="Search">
    </form>
</div><!-- end panel -->    

<div data-role="header">
  <h1>Sample Title</h1>
  <a href="#mypanel" id="#togglePanel" data-role="button" data-inline="true" class="ui-btn-right">Filter Results</a>
</div><!-- end header -->

<div data-role="content">

<div id='submitResult'></div> <!-- results will show here but only captures the data from val1 -->

<form id='test'>

    <label for="val1">Value 1:</label>
    <input type="text" name="val1"/>


    <a href="#popup" data-rel="popup" data-role="button" data-inline="true">Show Popup</a>

    <div data-role='popup' id='popup' data-history='false'>         
        <label for="val2">Value 2:</label>
        <input type="text" name="val2"/>
        <input id='sendNow' type='submit' value='Submit'/>

        <div id='submitResult'></div> <!-- results will not show here at all -->
    </div><!-- end popup -->

</form>

</div><!-- end content -->

<div data-role="footer">

</div><!-- end footer -->
</div><!-- end page -->

Answer 1

为可能遇到此问题的任何人找出它。因此，当我序列化我的数据时，我只需要在弹出窗口中序列化各个输入，而不是尝试序列化整个表单。这是因为无论我尝试什么，框架似乎都会删除我放在弹出窗口中的任何<form>标签。

喜欢如此：

$.post('processVal1andVal2.php', $('#test, input[name='val2']').serialize(), function(data) {

获得使用jQuery Mobile弹出窗口的表单

1 个答案: