Advanced Search

JQuery Mobile Multipage Example - form.html

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html> 
  2. <html> 
  3.  
  4. <head>
  5. 	<meta charset="utf-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  7. 	<title>Form Example</title> 
  8. 	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
  9. 	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  10. 	<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
  11. </head> 
  12.  
  13.  
  14. <body> 
  15.  
  16. <div data-role="page">
  17.  
  18. 	<div data-role="header">
  19. 		<h1>Form Page</h1>
  20. 	</div><!-- /header -->
  21.  
  22. 	<div data-role="content">	
  23. 		<form action="index.html" method="get">
  24.  
  25. 			<!--	Wrap Inputs in fieldcontain which will sort out borders and padding, can cause layout to break	-->
  26. 			<div data-role="fieldcontain">
  27. 				<label for="firstName"> First Name: </label>
  28. 				<input type="text" name="firstName" value="" id="firstName" /> <!--	Use id and name values	-->
  29. 			</div>	
  30.  
  31. 			<div data-role="fieldcontain">
  32. 				<label for="lastName"> Last Name: </label>
  33. 				<input type="text" name="lastName" value="" id="lastName" /> <!--	Use id and name values	-->
  34. 			</div>	
  35.  
  36. 			<div data-role="fieldcontain">
  37. 				<label for="age"> Age: </label>
  38. 				<input min="7" max="120" type="range" name="age" value="" id="age" /> <!--	Use id and name values	-->
  39. 			</div>	
  40.  
  41. 			<div data-role="fieldcontain">
  42. 				<label for="cars"> Favorite Car: </label>
  43. 				<select id="cars" name="cars"> <!--	Use id and name values	-->
  44. 					<option value="honda"> Honda </option>
  45. 					<option value="toyota"> Toyota </option>
  46. 					<option value="ford"> Ford </option>
  47. 				</select>
  48. 			</div>
  49.  
  50. 			<div data-role="fieldcontain">
  51. 				<p> Your Hobbies? </p>
  52. 				<input type="checkbox" name="movies" value="" id="movies" /> <!--	Use id and name values	-->
  53. 				<label for="movies"> Movies: </label>
  54. 				<input type="checkbox" name="sports" value="" id="sports" /> <!--	Use id and name values	-->
  55. 				<label for="sports"> Sports: </label>
  56. 				<input type="checkbox" name="gaming" value="" id="gaming" /> <!--	Use id and name values	-->
  57. 				<label for="gaming"> Gaming: </label>
  58. 			</div>
  59.  
  60. 			<div data-role="fieldcontain">
  61. 				<input type="submit" name="" value="Submit Form" data-theme="b" />
  62. 			</div>
  63.  
  64. 		</form>	
  65. 	</div>
  66.  
  67. 	<div data-role="footer">
  68. 		<h4>Footer content</h4>
  69. 	</div><!-- /footer -->
  70.  
  71. </div>
  72. <script>
  73.  
  74. 	$('form').submit( function(e) {
  75.  
  76. 		var vals = $(this).serialize();
  77. 		$.post( 'server.php', vals, function (data) {
  78.  
  79.  
  80.  
  81. 		});
  82.  
  83. 		e.preventDefault();
  84.  
  85. 	});
  86.  
  87. </script>
  88. </body>
  89. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.