Form redirect using javascript doesn't work if I come from a different page

Form redirect using javascript doesn't work if I come from a different page

Hey all!

This is my first post, so hopefully it'll be good (and don't go too hard on me)!

I'm creating a website that uses jQuery Mobile because its transitions are awesome!

I have two pages that I'm working on (I have other pages, but they aren't part of my problem)

Homepage.php (this is the full page):
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Gordmart MIS Homepage</title>
  6. <link rel="stylesheet" href="css/jQuery.css">
  7. <link rel="stylesheet" href="css/Main.css">
  8. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  10. </head>
  11. <body>
  12. <div>
  13. <?php include("Header.php");?>
  14. </div>
  15. <div class="main">
  16. <h1>Welcome to GordMart!</h1><br>
  17. <p> Here at GordMart, we feature a great selection of high-quality merchandise, friendly service and, of course, Every Day Gord Prices&#153;. Find out how innovative thinking, leadership through service, and above all, our commitment to saving people money so they can live better have made us the business we are today and are shaping the company we will be tomorrow.</p>
  18. </div>
  19. </body>
  20. </html>
The link to
  1. <link rel="stylesheet" href="css/jQuery.css">
is just a link to a modified version of the jQuery Mobile css found here  http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css (the only stuff I modified had to do with color and text shadows and backgrounds, nothing serious)

And here is the Forms.js script:
  2. function checkReport (form) {
  3. var checked = form.querySelector('input:checked');
  4. var value = checked ? checked.value : null;
  6. if (value == "customer") {
  7. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  8. var idx = href.indexOf("Reports", 0);
  9. var new_href = href.slice(0,idx+19) + "#customer" + href.slice(idx+19);
  11. window.location.replace(new_href);
  12. } else if (value == "item") {
  13. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  14. var idx = href.indexOf("Reports", 0);
  15. var new_href = href.slice(0,idx+19) + "#item" + href.slice(idx+19);
  17. window.location.replace(new_href);
  18. } else if (value == "department") {
  19. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  20. var idx = href.indexOf("Reports", 0);
  21. var new_href = href.slice(0,idx+19) + "#department" + href.slice(idx+19);
  23. window.location.replace(new_href);
  24. } else if (value == "person") {
  25. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  26. var idx = href.indexOf("Reports", 0);
  27. var new_href = href.slice(0,idx+19) + "#person" + href.slice(idx+19);
  29. window.location.replace(new_href);
  30. }
  31. }
  33. function checkCustomer (form) {
  34. var checked = form.querySelector('input:checked');
  35. var value = checked ? checked.value : null;
  37. if (value == "all") {
  38. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  39. var idx = href.indexOf("Reports", 0);
  40. var new_href = href.slice(0,idx+19) + "#allcustomers" + href.slice(idx+19);
  42. window.location.replace(new_href);
  43. } else if (value == "one") {
  44. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
  45. var idx = href.indexOf("Reports", 0);
  46. var new_href = href.slice(0,idx+19) + "#onecustomer" + href.slice(idx+19);
  48. window.location.replace(new_href);
  49. }
  50. }

And here is the Reports.php (this is all of the important stuff on the page, not the full page):
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Gordmart MIS Reports</title>
  6. <link rel="stylesheet" href="../css/jQuery.css">
  7. <link rel="stylesheet" href="../css/Main.css">
  8. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  10. </head>
  11. <body>
  12. <div data-role="page" class="frame" id="report">
  13. <div>
  14. <?php include("Header.php");?>
  15. </div>
  16. <div class="main">
  17. <h3>Would you like to view a report grouped by customers, items, sales departments, or sales people?</h3>
  18. <form data-ajax="false" method="post" id="reportform">
  19. <input type="radio" name="report" value="customer"><p>Customers</p>
  20. <input type="radio" name="report" value="item"><p>Items Sold</p>
  21. <input type="radio" name="report" value="department"><p>Sales Departments</p>
  22. <input type="radio" name="report" value="person"><p>Sales People</p>
  23. <input type="button" name="reportsubmit" value="Submit" onClick="checkReport(this.form)">
  24. </form>
  25. </div>
  26. </div>
  27. <div data-role="page" class="frame" id="customer">
  28. <div>
  29. <?php include("Header.php");?>
  30. </div>
  31. <div class="main">
  32. <h3>Would you like to view a cumulative report of all customers, or a single report of just one?</h3>
  33. <form data-ajax="false" method="post">
  34. <input type="radio" name="customer" value="all"><p>All</p>
  35. <input type="radio" name="customer" value="one"><p>One</p><br>
  36. <input type="button" name="customersubmit" value="Submit" onClick="checkCustomer(this.form)">
  37. </form>
  38. </div>
  39. </div>
  40. <script scr="../js/Forms.js"></script>
That redirects my form to another form on the same page (they aren't visible at the same time due to jQuery Mobile). Or it should.

That is where my problem gets weird.

When I come from any other page besides starting off on the Reports page, when I click the submit button on the reportform the javascript doesn't execute even though it should because of onClick. If I come from the Reports page the javascript does execute when I click the submit button. Looking at this post and my code can you please tell me why is that?

Basically what happens is that when I come from another page other than just starting out on my Reports page, when I go to my Reports page and click the customer radio button on reportform and then press submit, nothing happens even though it is supposed to execute the javascript onClick and redirect to the div with the id of customer.

When I start out on the Reports page it doesn't matter and it works on the first try to just click a radio button and submit and get redirected.

Note: By the way when I said "customer" two in the paragraph above the one above this one it was just an example although I do have a customer radio button. I have other radio buttons and forms, but I omitted them from this post to keep the code shorter.

Can anyone help me with this issue? Please try to tell me what I can do to solve this error and why this error is happening in the first place.

Thanks,
leonardude