Form processing onClick isn't being activated if I come from another page with jQuery Mobile

Form processing onClick isn't being activated if I come from another page with jQuery Mobile

Hey all!

I'm creating a website that uses lots of forms and jQuery Mobile. I'm having a problem where if I'm on a page with jQuery Mobile and I go to another page with jQuery Mobile, then on the page that I go to my form isn't being processed onClick. In this post I'm going to be talking about two pages, Reports.php and DataManipulation.php. By the way if I refer to files or ids or classes that aren't in this post, be sure that I have them because I do, I just wanted to keep this post shorter.


Can you please help me find out why,  when I come from a page with jQuery Mobile to another page with jQuery Mobile and a form, the page that I come to with the form isn't processed onClick?

Here is what is in the head tag for both pages (I'm not going to show my head tag in my files as to keep this post shorter, but it is there):
  1. <title>MIS</title>
  2. <link rel="stylesheet" href="../css/jQueryMobile.css"> <!--Link to the jQuery Mobile css file, modified for my purposes-->
  3. <link rel="stylesheet" href="../css/Main.css"> <!--Link to my css file-->
  4. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  5. <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  6. <script src="../scripts/js/Normalize.js"></script> <!--Link to a file that disables some of jQuery Mobile's classes for purposes of jQuery Mobile's css not interfering with my css-->

Here is my Normalize.js file (just in case you wanted to see it):
  1. $(document).on('pagebeforeshow', 'html', function() {     
  2.       $('body').removeClass('ui-mobile-viewport');
  3.       $('body').removeClass('ui-overlay-viewport');
  4.       $('div').removeClass('ui-page-theme-a');
  5.       $('div').removeClass('ui-btn');
  6.       $('div').removeClass('ui-input-btn');
  7.       $('div').removeClass('ui-corner-all');
  8.       $('div').removeClass('ui-shadow');
  9.       $('div').removeClass('ui-input-text');
  10.       $('div').removeClass('ui-body-inherit');
  11.       $('div').removeClass('ui-shadow-inset');
  12. });

Here is my Reports.php page:
  1. <!DOCTYPE html>
  2. <html>
  3.       <body>
  4.             <div data-role="page" class="frame" id="report">
  5.                   <div class="header">
  6.                         <?php include("../scripts/php/ReportsHeader.php");?>
  7.                   </div>
  8.                   <div class="main">
  9.                         <h3>Would you like to view a report grouped by customers, items, sales departments, or sales people?</h3>
  10.                         <form data-ajax="false" method="post" class="form" id="reportform">
  11.                               <input type="radio" name="report" value="customer"><p>Customers</p>
  12.                               <input type="radio" name="report" value="item"><p>Items Sold</p>
  13.                               <input type="radio" name="report" value="department"><p>Sales Departments</p>
  14.                               <input type="radio" name="report" value="person"><p>Sales People</p>
  15.                               <input type="button" data-role="none" name="reportsubmit" value="Submit" onClick="checkReport(this.form)">
  16.                         </form>
  17.                   </div>
  18.             </div>
  19.             <div data-role="page" class="frame" id="customer">
  20.                   <div class="header">
  21.                         <?php include("../scripts/php/ReportsHeader.php");?>
  22.                   </div>
  23.                   <div class="main">
  24.                         <h3>Would you like to view a cumulative report of all customers, or a single report of just one?</h3>
  25.                         <form data-ajax="false" method="post" class="form">
  26.                               <input type="radio" name="customer" value="all"><p>All</p>
  27.                               <input type="radio" name="customer" value="one"><p>One</p><br>
  28.                               <input type="button" data-role="none" name="customersubmit" value="Submit" onClick="checkCustomer(this.form)">
  29.                         </form>
  30.                   </div>
  31.             </div>
  32.             <script src="../scripts/js/Reports.js"></script>
  33.       </body>
  34. </html>

Here is my Reports.js file:
  1. function checkReport(form) {
  2.       var checked = form.querySelector('input:checked');
  3.       var value = checked ? checked.value : null;
  4.       
  5.       if (value == "customer") {
  6.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  7.             var idx = href.indexOf("Reports", 0);
  8.             var new_href = href.slice(0, idx + 19) + "#customer" + href.slice(idx + 19);
  9.             
  10.             window.location.replace(new_href);
  11.       } else if (value == "item") {
  12.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  13.             var idx = href.indexOf("Reports", 0);
  14.             var new_href = href.slice(0, idx + 19) + "#item" + href.slice(idx + 19);
  15.             
  16.             window.location.replace(new_href);
  17.       } else if (value == "department") {
  18.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  19.             var idx = href.indexOf("Reports", 0);
  20.             var new_href = href.slice(0, idx + 19) + "#department" + href.slice(idx + 19);
  21.             
  22.             window.location.replace(new_href);
  23.       } else if (value == "person") {
  24.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  25.             var idx = href.indexOf("Reports", 0);
  26.             var new_href = href.slice(0, idx + 19) + "#person" + href.slice(idx + 19);
  27.             
  28.             window.location.replace(new_href);
  29.       }
  30. }

Here is my DataManipulation.php file:
  1. <!DOCTYPE html>
  2. <html>
  3.       <body>
  4.             <div data-role="page" class="frame" id="data">
  5.                   <div class="header">
  6.                         <?php include("../scripts/php/DataManipulationHeader.php");?>
  7.                   </div>
  8.                   <div class="main">
  9.                         <h3>Would you like to insert data into the database, update data in the database, or delete a row in the database?</h3>
  10.                         <form data-ajax="false" method="post" class="form" id="reportform">
  11.                               <input type="radio" name="data" value="insert"><p>Insert</p>
  12.                               <input type="radio" name="data" value="update"><p>Update</p>
  13.                               <input type="radio" name="data" value="delete"><p>Delete</p>
  14.                               <input type="button" data-role="none" name="datasubmit" value="Submit" onClick="checkData(this.form)">
  15.                         </form>
  16.                   </div>
  17.             </div>
  18.             <script src="../scripts/js/DataManipulation.js"></script>
  19.       </body>
  20. </html>

And finally here is the DataManipulation.js file:
  1. function checkData(form) {
  2.       var checked = form.querySelector('input:checked');
  3.       var value = checked ? checked.value : null;
  4.       
  5.       if (value == "insert") {
  6.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/DataManipulation/Insert.php";
  7.             window.location.replace(href);
  8.       } else if (value == "update") {
  9.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/DataManipulation/Update.php";
  10.             window.location.replace(href);
  11.       } else if (value == "delete") {
  12.             var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/DataManipulation/Delete.php";
  13.             window.location.replace(href);
  14.       }
  15. }

Can you please help me find out why,  when I come from a page with jQuery Mobile to another page with jQuery Mobile and a form, the page that I come to with the form isn't processed onClick?

Thank you!