Does anyone have an idea why this does not work? The only data this serializes is the data from page 1. I also tried to have two different functions linked to each of the pages (and I had it as 2 separate forms, allthough then it will only overwrite eachother (and everything else).
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
$("#page3").text($("#q").serialize());
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<form id="q">
<div data-role="content">
<input type="checkbox" name="4[]" value="1">1</input><br/>
<input type="checkbox" name="4[]" value="2">2</input><br/>
<input type="checkbox" name="4[]" value="3">3</input><br/>
<input type="checkbox" name="4[]" value="4">4</input><br/>
<input type="checkbox" name="asdf[]" value="1">1</input><br/>
<input type="checkbox" name="asdf[]" value="2">2</input><br/>
</div>
<a data-role="button" href="#page2">Next</a>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<input type="checkbox" name="3[]" value="11">11</input><br/>
<input type="checkbox" name="3[]" value="21">21</input><br/>
<input type="checkbox" name="adf[]" value="1">11</input><br/>
<input type="checkbox" name="adf[]" value="2">12</input><br/>
</div>
</form>
<a data-role="button" type="submit" href="#page3" id="submit">Next</a>
</div>
<div data-role="page" id="page3">
</div>
Your problem likely has something to do with how you have your first form interleaved with the outer divs – not permitted in HTML, not sure what the browser will make of this. Can you close your first form within the div, start a new form inside the page 2 div?