www.webdeveloper.com
Results 1 to 9 of 9

Thread: Car 'Make' 'Model' 'Year' 'Battery' search form

  1. #1
    Join Date
    Jun 2012
    Posts
    23

    Car 'Make' 'Model' 'Year' 'Battery' search form

    Hello,

    I recenly started with a dropdown form that get car Make, Model and Year. I have a database called "Vehicles" with 3 Tables "year", "make", "model". When you select a year the optionfield make is comming up and you can select a make but after selecting for example "Toyota" it is stuck on Please Wait...

    Can somebody tell me what I am missing or what is wrong with this script?

    This is my Index.php:

    HTML Code:
    <html>
    <head>
    <title>Dropdown Car Year Make Model</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <?php include_once('dropdown.php'); ?>
    </head>
    <body>
                    <form action="" method="post">
                        <select name="drop_1" id="drop_1">
                          <option value="" selected="selected" disabled="disabled">Select a Year</option>
                          <?php getTierOne(); ?>
                        </select>
                        <span id="wait_1" style="display: none;">
                        <img alt="Please Wait" src="ajax-loader.gif"/>
                        </span>
                        <span id="result_1" style="display: none;"></span>
                        <span id="wait_2" style="display: none;">
                        <img alt="Please Wait" src="ajax-loader.gif"/>
                        </span>
                        <span id="result_2" style="display: none;"></span>
                        <span id="wait_3" style="display: none;">
                        <img alt="Please Wait" src="ajax-loader.gif"/>
                        </span>
                        <span id="result_3" style="display: none;"></span>
                    </form>
    </body>
    </html>
    Custom.js (Javascript)

    Code:
    $(document).ready(function() {
        $('#wait_1').hide();
        $('#drop_1').change(function(){
          $('#wait_1').show();
          $('#result_1').hide();
          $.get("dropdown.php", {
            func: "drop_1",
            drop_var: $('#drop_1').val()
          }, function(response){
            $('#result_1').fadeOut();
            setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
          });
            return false;
        });
    });
    function finishAjax(id, response) {
      $('#wait_1').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    Dropdown.php

    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    include_once('dbconnect.php');
    function 
    getTierOne()
    {
        
    $result mysql_query("SELECT DISTINCT year FROM vehicles order by year desc")
        or die(
    mysql_error());
          while(
    $tier mysql_fetch_array$result ))
            {
               echo 
    '<option value="'.$tier['year'].'">'.$tier['year'].'</option>';
            }
    }
    //**************************************
    //     First selection results     //
    //**************************************
    if(isset($_GET['func']) && ($_GET['func'] == "drop_1"))  {
       
    drop_1($_GET['drop_var']);
    }
    function 
    drop_1($drop_var)
    {
        include_once(
    'dbconnect.php');
        
    $result mysql_query("SELECT DISTINCT make FROM vehicles WHERE year='$drop_var' ORDER BY make asc")
        or die(
    mysql_error());
        echo 
    '<select name="drop_2" id="drop_2">
              <option value=" " disabled="disabled" selected="selected">Select Make</option>'
    ;
               while(
    $drop_2 mysql_fetch_array$result ))
                {
                  echo 
    '<option value="'.$drop_2['make'].'">'.$drop_2['make'].'</option>';
                }
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"dropdown.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_2').val(),
            drop_var2: $('#drop_1').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax('result_2', '\"+escape(response)+\"')\", 400);
             });
            return false;
        });
    </script>"
    ;
    }
    ?>
    In the future I will get a data file with car battery's that should match the selected make, model and year after a submit... Is this possible and how should I adjust my database and script?

    Any help would be very welcome

    Thanks in advance

    Kind Regards

  2. #2
    Join Date
    May 2006
    Location
    the netherlands
    Posts
    454
    You're in the wrong forum, this is a javascript question.
    And as such, only the generated output is relevant. This: <?php getTierOne(); ?> doesn't say anthing about your problem.

    At this moment i only see an onchange event for drop_1. You haven't given the situation of what it looks like when the response is added to the DOM, but i assume there will be a drop_2 ? you will need to include code to handle that one too.
    Free Scripts (PHP, Javascript, MySQL), homemade in the Excudo Devshed
    Create your own personal Startpage for free

  3. #3
    Join Date
    Jun 2012
    Posts
    23
    Hello again and thanks for the reply

    I got it working now but getting stuck with something else I want to create.

    This are my two scripts now:

    index.php

    PHP Code:
    <?php 
      
    include('db.php');
      include(
    'func.php');
    ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Chained Select Boxes using PHP, MySQL and jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#wait_1').hide();
        $('#drop_1').change(function(){
          $('#wait_1').show();
          $('#result_1').hide();
          $.get("func.php", {
            func: "drop_1",
            drop_var: $('#drop_1').val()
          }, function(response){
            $('#result_1').fadeOut();
            setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
          });
            return false;
        });
    });

    function finishAjax(id, response) {
      $('#wait_1').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax_tier_three(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    </script>
    </head>

    <body>
    <p>
    <form action="" method="post">
      
        <select name="drop_1" id="drop_1">
        
          <option value="" selected="selected" disabled="disabled">Selecteer Merk</option>
          
          <?php getTierOne(); ?>
        
        </select> 
        
        <span id="wait_1" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_1" style="display: none;"></span>
        <span id="wait_2" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_2" style="display: none;"></span> 
      
    </form>
    </p>
    <p>
    <?php if(isset($_POST['submit'])){
        
    $drop $_POST['drop_1'];
        
    $drop_2 $_POST['drop_2'];
        
    $drop_3 $_POST['drop_3'];
        echo 
    "U heeft een ";
        echo 
    $drop." ".$drop_2." geselecteerd uit ".$drop_3;
    }
    ?>
    </body>
    </html>
    func.php

    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    function getTierOne()
    {
        
    $result mysql_query("SELECT DISTINCT make FROM vehicles"
        or die(
    mysql_error());

          while(
    $tier mysql_fetch_array$result )) 
      
            {
               echo 
    '<option value="'.$tier['make'].'">'.$tier['make'].'</option>';
            }

    }

    //**************************************
    //     First selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
    drop_1($_GET['drop_var']);
    }

    function 
    drop_1($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_2" id="drop_2">
              <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>'
    ;

               while(
    $drop_2 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"func.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }


    //**************************************
    //     Second selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
    drop_2($_GET['drop_var']);
    }

    function 
    drop_2($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT * FROM vehicles WHERE model='$drop_var'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_3" id="drop_3">
              <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>'
    ;

               while(
    $drop_3 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
                }
        echo 
    '</select> ';
        echo 
    '<input type="submit" name="submit" value="Submit" />';
    }
    ?>
    When you press sumbit you get the following output when selecting:

    Make = Volvo
    Model = XC90
    Year = 2013

    "You selected a Volvo XC90 from 2013"


    So that part is working allright!

    The second thing I want to create is when you select the fields as above you also echo the Battery that belongs to that combination.

    I have another table called "battery" in my database for example this record:

    Make = Volvo
    Model = XC90
    Year = 2013
    Battery = XXX

    How can I echo "battery" too that belongs to the selected fields of the dropdown?

    Something like this:

    "You selected a Volvo XC90 from 2013 and you should buy the XXX battery"

    I got it this far but I'm not that good in php so if somebody could help me here that would be great

    Thanks in advance

  4. #4
    Join Date
    May 2006
    Location
    the netherlands
    Posts
    454
    For your next posts (here or on any other developers forum), please keep in mind the following etiquette:
    1. When you post a problem and manage to solve it yourself: always post the answer in the topic. The whole idea of a forum is that other people can also benefit, but if you don't post the solution your post becomes almost meaningless
    2. Please keep 1 threat focussed to 1 problem. If you bump in to other problems with your project, post them in a new topic.

    Regarding your problem however, take these steps:
    1. write a sql statement that retrieves the desired product and verify on the mysql command line (or with phpmyadmin) that it works
    2. substitute where necessary parts of the query for php-variables and write some php-code around it to execute it on the database, capture the output and echo it to the screen for verification
    3. when you've determined the query still gives the desired result, write the rest of the code with it (like, for example, echoing a message for the user

    If you get stuck, post the code where you get stuck describing the problem .. this way you show that you are putting an effort into yourself as well, instead of simply asking someone to do it for you
    Free Scripts (PHP, Javascript, MySQL), homemade in the Excudo Devshed
    Create your own personal Startpage for free

  5. #5
    Join Date
    Jun 2012
    Posts
    23
    Hello,

    I understand what you mean I did put effort in it myself...

    I'm just one step closer again!

    I added another dropdown for the battery..

    Look this is my code now

    Index.php

    PHP Code:
    <?php 
      
    include('db.php');
      include(
    'func.php');
    ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Chained Select Boxes using PHP, MySQL and jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#wait_1').hide();
        $('#drop_1').change(function(){
          $('#wait_1').show();
          $('#result_1').hide();
          $.get("func.php", {
            func: "drop_1",
            drop_var: $('#drop_1').val()
          }, function(response){
            $('#result_1').fadeOut();
            setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
          });
            return false;
        });
        $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get("func.php", {
            func: "drop_2",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
          });
            return false;
        });
    });

    function finishAjax(id, response) {
      $('#wait_1').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax2(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }

    function finishAjax_tier_three(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax_tier_four(id, response) {
      $('#wait_3').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    </script>
    </head>

    <body>
    <p>
    <form action="" method="post">
      
        <select name="drop_1" id="drop_1">
        
          <option value="" selected="selected" disabled="disabled">Selecteer Merk</option>
          
          <?php getTierOne(); ?>
        
        </select> 
        
        <span id="wait_1" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_1" style="display: none;"></span>
        <span id="wait_2" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_2" style="display: none;"></span> 
        <span id="wait_3" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_3" style="display: none;"></span> 
      
    </form>
    </p>
    <p>
    <?php if(isset($_POST['submit'])){
        
    $drop $_POST['drop_1'];
        
    $drop_2 $_POST['drop_2'];
        
    $drop_3 $_POST['drop_3'];
        
    $drop_4 $_POST['drop_4'];
        echo 
    "U heeft een ";
        echo 
    $drop." ".$drop_2." geselecteerd uit ".$drop_3." en u heeft daar deze accu voor nodig ".$drop_4;
    }
    ?>
    </body>
    </html>
    func.php:

    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    function getTierOne()
    {
        
    $result mysql_query("SELECT DISTINCT make FROM vehicles"
        or die(
    mysql_error());

          while(
    $tier mysql_fetch_array$result )) 
      
            {
               echo 
    '<option value="'.$tier['make'].'">'.$tier['make'].'</option>';
            }

    }

    //**************************************
    //     First selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
    drop_1($_GET['drop_var']);
    }

    function 
    drop_1($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_2" id="drop_2">
              <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>'
    ;

               while(
    $drop_2 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"func.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
    drop_2($_GET['drop_var']);
    }

    function 
    drop_2($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT year FROM vehicles WHERE model='$drop_var'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_3" id="drop_3">
              <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>'
    ;

               while(
    $drop_3 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_3').hide();
        $('#drop_3').change(function(){
          $('#wait_3').show();
          $('#result_3').hide();
          $.get(\"func.php\", {
            func: \"drop_3\",
            drop_var: $('#drop_3').val()
          }, function(response){
            $('#result_3').fadeOut();
            setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
    drop_3($_GET['drop_var']);
    }

    function 
    drop_3($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT accu FROM vehicles WHERE year='$drop_var'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_4" id="drop_4">
              <option value="" disabled="disabled" selected="selected">Selecteer Accu</option>'
    ;
      if (!
    $result) {
        
    // query error
      
    }     

      if (
    mysql_num_rows($result) === 0) {
        
    // No rows returned
      
    }
      else {

               while(
    $drop_4 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_4['accu'].'">'.$drop_4['accu'].'</option>';
                }
      }
        echo 
    '</select> ';
        echo 
    '<input type="submit" name="submit" value="Submit" />';
    }
    ?>
    After I selected the year I get another dropdown for the battery's and when I select my Volvo - XC90 - 2013 I also can select the accu that is matched with the rest... But I also get a lot of empty records in my dropdown...

    How can I fix this?

  6. #6
    Join Date
    Jun 2012
    Posts
    23
    Hello again,

    I fixed the empty records but I see another problem in my last function...

    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    function getTierOne()
    {
        
    $result mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC"
        or die(
    mysql_error());

          while(
    $tier mysql_fetch_array$result )) 
      
            {
               echo 
    '<option value="'.$tier['make'].'">'.$tier['make'].'</option>';
            }

    }

    //**************************************
    //     First selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
    drop_1($_GET['drop_var']);
    }

    function 
    drop_1($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_2" id="drop_2">
              <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>'
    ;

               while(
    $drop_2 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"func.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
    drop_2($_GET['drop_var']);
    }

    function 
    drop_2($drop_var2)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT year FROM vehicles WHERE model='$drop_var2'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_3" id="drop_3">
              <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>'
    ;

               while(
    $drop_3 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_3').hide();
        $('#drop_3').change(function(){
          $('#wait_3').show();
          $('#result_3').hide();
          $.get(\"func.php\", {
            func: \"drop_3\",
            drop_var: $('#drop_3').val()
          }, function(response){
            $('#result_3').fadeOut();
            setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if(isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
    drop_3($_GET['drop_var']);
    }
    function 
    drop_3($drop_var3)
    {  
        include_once(
    'db.php');
            
    $result mysql_query("SELECT * FROM vehicles WHERE year='$drop_var3'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_4" id="drop_4">
              <option value="" disabled="disabled" selected="selected">Selecteer Accu</option>'
    ;


               while(
    $drop_4 mysql_fetch_array$result )) 
                    {
                    if (
    $drop_4['accu'] != "") {
                  echo 
    '<option value="'.$drop_4['accu'].'">'.$drop_4['accu'].'</option>';
                    }
      }
        echo 
    '</select> ';
        echo 
    '<input type="submit" name="submit" value="Submit" />';
    }

    ?>
    When I can select an "accu" it will display all accu's from 2013 and not only the Volvo - XC90 from 2013...

    I have to edit my last function...

    I allready tried this:

    PHP Code:
    function drop_3($drop_var$drop_var2$drop_var3)
    {  
        include_once(
    'db.php');
            
    $result mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'"
        or die(
    mysql_error()); 
    But that is not working..

    Somebody can help me out with this?

    Tnx

  7. #7
    Join Date
    Jun 2012
    Posts
    23
    I figured it out with some help

    The code below is how its done

    Index.php

    PHP Code:
    <?php 
      
    include('db.php');
      include(
    'func.php');
    ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Chained Select Boxes using PHP, MySQL and jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#wait_1').hide();
        $('#drop_1').change(function(){
          $('#wait_1').show();
          $('#result_1').hide();
          $.get("func.php", {
            func: "drop_1",
            drop_var: $('#drop_1').val()
          }, function(response){
            $('#result_1').fadeOut();
            setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
          });
            return false;
        });
        $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get("func.php", {
            func: "drop_2",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
          });
            return false;
        });
    });

    function finishAjax(id, response) {
      $('#wait_1').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax2(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }

    function finishAjax_tier_three(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax_tier_four(id, response) {
      $('#wait_3').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    </script>
    </head>

    <body>
    <p>
    <form action="" method="post">
      
        <select name="drop_1" id="drop_1">
        
          <option value="" selected="selected" disabled="disabled">Selecteer Merk</option>
          
          <?php getTierOne(); ?>
        
        </select> 
        
        <span id="wait_1" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_1" style="display: none;"></span>
        <span id="wait_2" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_2" style="display: none;"></span> 
        <span id="wait_3" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_3" style="display: none;"></span> 
      
    </form>
    </p>
    <p>
    <?php if(isset($_POST['submit'])){
        
    $drop $_POST['drop_1'];
        
    $drop_2 $_POST['drop_2'];
        
    $drop_3 $_POST['drop_3'];
        
    $drop_4 $_POST['drop_4'];
        echo 
    "U heeft een ";
        echo 
    $drop." ".$drop_2." geselecteerd uit ".$drop_3." en u heeft daar deze accu voor nodig ".$drop_4;
    ?>
    <table border="1" bordercolor="#B5B5B5" style="background-color:#FFFFFF" width="250" cellpadding="3" cellspacing="3">
        <tr>
            <td>Merk:</td>
            <td><?php echo $drop;?></td>
        </tr>
        <tr>
            <td>Model:</td>
            <td><?php echo $drop_2;?></td>
        </tr>
        <tr>
            <td>Bouwjaar:</td>
            <td><?php echo $drop_3;?></td>
        </tr>
        <tr>
            <td>Accu:</td>
            <td><?php echo $drop_4;?></td>
        </tr>
    </table>
    <?php
    }
    ?>
    </body>
    </html>
    Func.php

    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    function getTierOne()
    {
        
    $result mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC"
        or die(
    mysql_error());

          while(
    $tier mysql_fetch_array$result )) 
      
            {
               echo 
    '<option value="'.$tier['make'].'">'.$tier['make'].'</option>';
            }

    }

    //**************************************
    //     First selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
    drop_1($_GET['drop_var']);
    }

    function 
    drop_1($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_2" id="drop_2">
              <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>'
    ;

               while(
    $drop_2 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"func.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_1').val(),
            drop_var2: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
    drop_2($_GET['drop_var'], $_GET['drop_var2']);
    }

    function 
    drop_2($drop_var$drop_var2)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT year FROM vehicles WHERE make='$drop_var' AND model='$drop_var2'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_3" id="drop_3">
              <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>'
    ;

               while(
    $drop_3 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_3').hide();
        $('#drop_3').change(function(){
          $('#wait_3').show();
          $('#result_3').hide();
          $.get(\"func.php\", {
            func: \"drop_3\",
            drop_var: $('#drop_1').val(),
            drop_var2: $('#drop_2').val(),
            drop_var3: $('#drop_3').val()
          }, function(response){
            $('#result_3').fadeOut();
            setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if(isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
    drop_3($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3']);
    }
    function 
    drop_3($drop_var$drop_var2$drop_var3)
    {  
        include_once(
    'db.php');
            
    $result mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'"
        or die(
    mysql_error());  
        
        echo 
    '<select name="drop_4" id="drop_4">
              <option value="" disabled="disabled" selected="selected">Selecteer Accu</option>'
    ;


               while(
    $drop_4 mysql_fetch_array$result )) 
                    {
                    if (
    $drop_4['accu'] != "") {
                  echo 
    '<option value="'.$drop_4['accu'].'">'.$drop_4['accu'].'</option>';
                    }
      }
        echo 
    '</select> ';
        echo 
    '<input type="submit" name="submit" value="Submit" />';
    }

    ?>

  8. #8
    Join Date
    Jan 2013
    Posts
    1
    Hi!

    Based on Joepiooo's code I have a question.
    My project is very similiaer to this one so I'm posting right here.

    Joepiooo's database looks like:
    -Make
    -Model
    -Year
    -Battery

    It is narrowed down through dropdown menus.

    What if i have 2 or more values in my table:

    like:
    -Make
    -Model
    -Year
    -Battery
    -fuel
    -color

    So if i have narrowed down to 1 car like volvo, xc90, 2011, 100ah, (diesel, silver). How do I display the last two values too.

    I tried a standard echo code :
    PHP Code:
     <?php
    mysql_select_db
    ('cars') or die (mysql_error());
    $result mysql_query("SELECT * from cars");

    while(
    $row mysql_fetch_array($result)){

    echo 
    $row['fuel'] ." - " $row['color'] . "<br />";
    }
    ?>
    but it doesnt work, and somehow I have the feeling I'm way off.

    All I want is that after the dropdown menus the other values for the car are displayed.

    PS: Sorry I'm a beginner and english isn't my native language.

  9. #9
    Join Date
    Jan 2014
    Posts
    1
    Hello Joepiooo.

    I would like to have a personal conversation with you via e-mail.

    I need exactly this kind of search function for my website.
    Contact: m.boege2@gmail.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles