Form submit goes to wrong page on mutlipage file
Hey, I have a multipage layout with the first page linking to the second page.
On the second page there's a <form> which links in its action attribute to the same page, because I want to display the second page again after clicking the submit button.
But appearently this does not work: when clicking the submit button, I'm always redirectet to the first page of the multipage layout.
Check out this code to see what I try to describe:
- <!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>
I read the 'linking within a multi-page document' paragraph of the documentation, but I guess that doesn't fit here because the page I am linking to is already inside the DOM.
If I add the data-ajax="false" attribute, it works fine, but I do not want to reload the entire page.
Can someone explain the jqm behavior here, is this a bug?