Problem with Ajax form submit

Problem with Ajax form submit

I have this mobile page I'm working on, and I can't seem to get the ajax call to work properly.  Whenever I click the submit button, it reloads the page, with all the data submitted in the url, as in a get method.  However, this data should be submitted via post, and it's only "posting" data back to this page, instead of the "users.php" page like it should be.  My guess would be is that the "submit" function for this is somehow incorrectly implemented, but I'm at a bit of a loss as to what I've done wrong.


  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <title>jcBook</title>
  9. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  10. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  11. <link rel="stylesheet" href="style/swipe-page.css" id="demo-style">
  12. <link rel="stylesheet" href="style/default.css" >
  13. <script>
  14. // Bind to "mobileinit" before you load jquery.mobile.js
  15. // Set the default transition to slide
  16. $(document).on( "mobileinit", function() {
  17. $.mobile.defaultPageTransition = "slide";
  18. });
  19. </script>
  20. <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  21. <script src="js/swipe-page.js"></script>
  22. </head>
  23. <body>

  25. <div data-role="page" id="appSignUp" class="demo-page ui-responsive-panel" data-dom-cache="false" data-theme="a" >

  27. <div data-role="header" data-theme="a" >
  28. <a href="#nav-menu-panel" data-icon="grid" data-iconpos="notext">Menu</a>
  29. <a href="#nav-login-panel" data-icon="in" data-iconpos="notext">Log In</a>
  30. <h1 id="pageTitle"></h1>
  31. </div><!-- /header -->
  32. <div data-role="content" data-theme="e">
  33. <h3 id="notification"></h3>
  34. <form id="frmSignUp" data-transition="fade" >
  36. <input type="hidden" id="action" name="action" value="addUser" />
  37. <input type="hidden" id="clientKey" name="clientKey" value="web" />

  39. <label for="firstName">First name:</label>
  40. <input type="text" id="firstName" name="firstName" />

  42. <label for="lastName">Last name:</label>
  43. <input type="text" id="lastName" name="lastName" />
  45. <label for="email">Email address:</label>
  46. <input type="text" id="email" name="email" />
  48. <label for="password">Please enter a password (minimum 5 characters):</label>
  49. <input type="password" id="password" name="password" />
  51. <label for="password2">Repeat your password:</label>
  52. <input type="password" id="password2" name="password2" />
  54. <label for="mobileNumber">Your Mobile Number:</label>
  55. <input type="text" id="mobileNumber" name="mobileNumber" />

  57. <label for="passphrase">What is your favorite color:</label>
  58. <input type="text" id="passphrase" name="passphrase" />

  60. <input type="submit" id="submit" name="submit" value="Contine" />
  61. </form>
  62. </div><!-- /content -->

  64. <div data-role="footer" >
  65. </div><!-- /footer -->
  66. <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-menu-panel" data-theme="a">
  67. <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
  68. <li data-icon="delete" style="background-color:#111;">
  69. <a href="#" data-rel="close">Close menu</a>
  70. </li>
  71. <li data-filtertext="" >
  72. <a href="appOverview.php">Overview</a>
  73. </li>
  74. <li data-filtertext="" >
  75. <a href="appAccounts.php">Accounts</a>
  76. </li>
  77. <li data-filtertext="" >
  78. <a href="appLedgers.php">Ledgers</a>
  79. </li>
  80. <li data-filtertext="" >
  81. <a href="appBills.php">Bills</a>
  82. </li>
  83. <li data-filtertext="" >
  84. <a href="appReports.php">Reports</a>
  85. </li>
  86. </ul>

  88. <!-- panel content goes here -->
  89. </div><!-- /panel -->
  90. <div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="nav-login-panel" data-theme="e">

  92. <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
  93. <li data-icon="delete" style="background-color:#111;">
  94. <a href="#" data-rel="close">Close menu</a>
  95. </li>
  96. <li data-filtertext="" >
  97. <a href="appSignUp.php">Sign Me Up!</a>
  98. </li>
  99. <li data-filtertext="" >
  100. <a href="appSignIn.php">Sign In</a>
  101. </li>
  102. <li data-filtertext="" >
  103. <a href="appSignOut.php">Sign Out</a>
  104. </li>
  105. </ul>

  107. </div><!-- /panel -->
  108. <script src="js/onLoad.js"></script>
  109. <script>
  110. $(function() {
  111. $("#submit").click(function() {

  113. var frmData = $("#frmSignUp").serialize();

  115. $.ajax({
  116. url: "users.php",
  117. type: "post",
  118. dataType: "json",
  119. data: frmData,
  120. success: onSuccess
  121. });
  122. });

  124. function onSuccess(data) {
  125. $("#notification").html(data.error);
  126. }
  127. });
  128. </script>
  130. </div><!-- /page -->
  131. </body>
  132. </html>