CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   PHP (http://www.codingforums.com/forumdisplay.php?f=6)
-   -   Dynamic Car Make, Model, Year, Battery dropdown form (http://www.codingforums.com/showthread.php?t=285446)

Joepiooo 01-08-2013 08:10 AM
Dynamic Car Make, Model, Year, Battery dropdown 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:

Code:
<html>
<head>
<title>Dropdown</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

TFlan 01-08-2013 07:52 PM
The reason why it "gets stuck" on loading is because I don't see any real Ajax happening, and you have no code to extract your list of make-related models.

This script is not finished, that is your problem. Nothing is wrong, albeit it's not functioning the way you think it is

Joepiooo 01-11-2013 12:40 PM
Hello again,

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

Dubz 01-12-2013 01:10 AM
DO you have any type of identifier that corresponds between the model of the car and the battery that works on it? What I mean by that is, is there some way of matching the model to the battery? You would need a column in the database with the batteries that match up to this if you are finding the battery in the database and don't know it off hand. If you either give a screenshot or text based layout of the table and it's columns (at least important ones to find it), it would be easier to assist you.

As an example if you do not wish to do that, try something like this:

Say I have the following combination:
Make: Volvo
Model: XC90
Year: 2013

Now I need to find the battery, and for the example we'll just say it's 246 (I don't know much about automotive things).
Since you said you have a table for the batteries, I'm assuming it's going to have at least a column with the name in it. You need some other column that holds a value that you can match it on (ex. serial, the make/model/year combination, or something that is unique to that battery). All you need to do is perform a query that will select that battery from the table with the given information.

Example 1:
PHP Code:
mysql_query('SELECT * FROM batteries WHERE `serial`=\''.$batterySerial.'\''); 
Example 2:
PHP Code:
//THis variable would be set by the user's input
$car = array(
    'make' => 'Volvo',
    'model' => 'XC90',
    'year' => 2013
);
mysql_query('SELECT * FROM batteries WHERE `make`=\''.$car['make'].'\' AND `model`=\''.$car['model'].'\' AND `year`=\''.$car['year'].'\''); 
If you need any more assistance, feel free to ask here.

Joepiooo 01-14-2013 09:31 AM
Hi,

Thanks for the reply:)

I almost got it working but still got one problem...
My script is like this now:

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" />';
}

?>
I got a dropdown with batteries now but it is getting multiple batteries because I got more cars from the year 2013 for example...

How can I edit the last function that it only will show the battery from Volvo - XC90 - 2013 and not all the batteries from 2013?

Thanks in advance:)

Edit =

My database is like this:

Database = vehicles
Tables

- id
- make
- model
- year
- battery(accu)

Arcticwarrio 01-14-2013 04:56 PM
a 2nd WHERE in your query, well its HAVING

something like

PHP Code:
$result = mysql_query("SELECT * FROM vehicles WHERE year='$drop_var3' HAVING model='$drop_var2'") 

Joepiooo 01-15-2013 09:28 AM
I got it all working!

People that are interested here is the code:

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" />';
}

?>
:)

jack118 01-26-2013 04:54 PM
Hi!
I have a nearly similar project, I'm working on.

Let's say my database based on Joepiooo's has :

- id
- make
- model
- year
- battery(accu)
-fuel
-color

How can I echo "fuel" and "color" from my down narrowed result.
I tried it with a standard echo command:
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 didn't work.

It should display like this:
Volvo
XC90
2009
accu

(+extra data from table, after filtering through dropdown)

70 liter
silver

Can someone help me?

PS: Sorry English is not my native language


All times are GMT +1. The time now is 04:21 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.