Jquery Newbie, Dynamic dropdown menu submission

Jquery Newbie, Dynamic dropdown menu submission

Hello I'm very new to JQuery and I'm working on a script that is a form with a Chained or Dependent dropdown menu for Year, Make & Model selector that is MySQL/PHP - JQuery. I'm at the point were I can select all of the dropdowns but I'm stuck on how to send that data over to a php script (handleIndex.php) I would like to get the values that are selected and use some type of $_GET statement to redirect to the new URL with the selected values appended like ( handleIndex.php?year=year&make=make&model=model ) . I will include the script below. Can someone point me in the right direction please?


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.     <script type="text/javascript" src="jquery-1.3.2.js"></script>
  5.     <script type="text/javascript">
  6.         $("document").ready(function(){
  7.             $("#make").attr("disabled","disabled");
  8. $("#model").attr("disabled","disabled");
  9.             $("#year").change(function(){
  10. $("#make").attr("disabled","disabled");
  11. $("#make").html("<option>wait...</option>");
  12. $("#model").html("<option>wait...</option>");
  13. var id = $("#year option:selected").attr('value');
  14. $.post("select_type.php", {id:id}, function(data){
  15. $("#make").removeAttr("disabled");
  16. $("#make").html(data);
  17. });
  18. });
  20. $("#make").change(function(){
  21. $("#model").attr("disabled","disabled");
  22. $("#model").html("<option>wait...</option>");
  23. var id = $("#make option:selected").attr('value');
  24. $.post("select_model.php", {id:id}, function(data){
  25. $("#model").removeAttr("disabled");
  26. $("#model").html(data);
  27. });
  28. });
  29. /*THIS IS WHERE I WOULD LIKE TO SEND THE FORM DATA (Year, Make & Model) TO handleForm.php FILE*/
  30. $("form#select_form").submit(function(){
  31. var year = $("#year option:selected").attr('value');
  32. var make = $("#make option:selected").attr('value');
  33. var model = $("#model option:selected").attr('value');
  34. if(year>0 && make>0)
  35. {
  36. var result = $("#model option:selected").html();
  37. $("#result").html('your choice: '+result);
  38. }
  39. else
  40. {
  41. $("#result").html("you must choose two options!");
  42. }
  43. return false;
  44. });
  45. });
  46.     </script>
  47.     </head>
  48.     <body>
  49.         <?php include "select.class.php"; ?>
  50.         <form id="select_form">
  51.             Choose a Year:<br />
  52.             <select id="year"> <!--SELECTING A YEAR-->
  53.                 <?php echo $opt->ShowYear(); ?>
  54.             </select>
  55.         <br /><br />
  56.         Choose a Make:<br />
  57.         <select id="make"> <!--SELECTING A MAKE-->
  58.          <?php echo $opt->ShowModel(); ?>
  59.              <!--<option value="0">choose...</option>-->
  60.         </select>
  61.         <br /><br />
  62.         Choose a Model:<br />
  63.         <select id="model"> <!--SELECTING A MODEL-->
  64.              <option value="0">choose...</option>
  65.         </select>
  66.         <br /><br />
  67.         <input type="submit" value="confirm" />
  68.         </form>
  69.         <div id="result"></div>
  70.     </body>
  71. </html>