JQuery Mobile Multipage Example - form.html


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



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.