Demo - Passing parameters to JQM page

Enter parameter value and click 'Go To Page2' button. The page2 will be called with parameter value you have entered in the text box below
Parameter Value :
Go To Page2
Source Code of this page :
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html> 

<html> 
<head> 
	<title>Demo - Passing paramter to JQM 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>
	<script src="purl.js"></script>
	
	<script type="text/javascript">
		$(document).bind("pageinit", function(){
			$("#gotoBtn").click(function(){
				var argValue = $("#argTxt").val();
				$.mobile.changePage("page2.html",{data:{arg1:argValue}});
				//or you could pass parameters in the URL
				//$.mobile.changePage("page2.html?arg1=Ram");
			});
		});
	</script>
</head> 

<body> 
	<div data-role="page">
	
		<div data-role="header">
			<h1>Demo - Passing parameters to JQM page</h1>
		</div>
	
		<div data-role="content">
			Enter parameter value and click 'Go To Page2' button. The page2 will be called with parameter value you have entered in the text box below<br>	
		    Parameter Value : <input type="text" id="argTxt" value="Ram"> <br>
			<a href="#" data-role="button" data-inline="true" id="gotoBtn">Go To Page2</a>	
		</div>
	
		<div data-role="footer">
			<h4>Page1 Footer</h4>
		</div>
	</div>
</body>
</html>

Page1 Footer