Question

我在jquery移动网站上有两个或更多页面的表单有问题。

一个页面包含一个表单，当单击此表单的提交按钮时，我想提交表单数据，然后保持在此页面上。所以我将该页面的id添加到表单的action属性中。（<form action="#two">）。

但不幸的是，这似乎不起作用。提交表单数据时，总是会加载实际文件的第一页，即使浏览器的url看起来正确（附加了正确的id）。

而且情况变得更糟。因为我将id添加到表单的action属性中，jqm加载文件的第一页但显然认为是在第二页上，因此指向带有表单的页面的链接将不再起作用。

有一件事解决了这个问题：将data-ajax="false"添加到表单元素强制jqm停止基于ajax的页面处理此表单，单击提交按钮时，我最终会出现在右页，但我不想要重新加载整个页面，这是没有解决方案。

有谁知道这里发生了什么，并遇到了同样的问题？随意尝试附加的例子，我希望有人能解决这个问题。

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

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

    <div data-role="header">
        <h1>First page</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>
        <p><a href="#two">Link to second page</a></p>   
    </div><!-- /content -->

</div><!-- /page -->


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

    <div data-role="header">
        <h1>Second page</h1>
    </div><!-- /header -->

    <div data-role="content">   

        <form action="#two">
            <button type="submit">Submit</button>
        </form>

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

</div><!-- /page -->

</body>
</html>

Answer 1

更改输入提交标记以调用函数。

<input type="submit" onclick="submitThis()" />

将此逻辑添加到您的提交函数中，该函数将通过ajax调用提交URL并返回false以避免实际提交表单。

var submitThis = function() {

// get form data using jQuery, and call the link using $.ajax()

return false; // This will avoid submitting the page
}

- EDIT-- 相反或返回false，您也可以使用preventDefault（）方法

        $("#submit").submit( function (e) {
                e.preventDefault();
               // do your task
        });

jqm表单提交多项

1 个答案: