3 Replies - 1535 Views - Last Post: 15 January 2013 - 02:30 AM Rate Topic: -----

#1 Joepiooo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 05-February 10

Dynamic Car Make, Model, Year, Battery dropdown form

Posted 08 January 2013 - 06:13 AM

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>
<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)

$(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
//**************************************
//     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

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic Car Make, Model, Year, Battery dropdown form

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3214
  • View blog
  • Posts: 10,777
  • Joined: 12-December 12

Re: Dynamic Car Make, Model, Year, Battery dropdown form

Posted 08 January 2013 - 06:51 AM

It is hard to read but I can't see that you have written any code that would return details about the "model".

I question the way that you are doing this though. In particular, you are returning an embedded JS-script and I am not sure that this would be parsed; that is, interpreted as a script.

I would consider the following:

Is there so much data that it requires Ajax calls? If not then construct all three selects and use jQuery to hide/show or enable them.
If there is a lot of data, then consider populating the year and the make, and use Ajax to return the models.
Use JSON to return the data using PHP json_encode. That is, have two empty selects and, when the JSON data is retrieved, use JS/jQuery to append the options from this data and enable the selects.

BTW Even though year is not an MySql reserved word I would still use back-ticks `year`. In fact, I wouldn't, personally, use year as a field name.

This post has been edited by andrewsw: 08 January 2013 - 06:56 AM

Was This Post Helpful? 0
  • +
  • -

#3 Joepiooo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 05-February 10

Re: Dynamic Car Make, Model, Year, Battery dropdown form

Posted 11 January 2013 - 05:44 AM

View Postandrewsw, on 08 January 2013 - 06:51 AM, said:

It is hard to read but I can't see that you have written any code that would return details about the "model".

I question the way that you are doing this though. In particular, you are returning an embedded JS-script and I am not sure that this would be parsed; that is, interpreted as a script.

I would consider the following:

Is there so much data that it requires Ajax calls? If not then construct all three selects and use jQuery to hide/show or enable them.
If there is a lot of data, then consider populating the year and the make, and use Ajax to return the models.
Use JSON to return the data using PHP json_encode. That is, have two empty selects and, when the JSON data is retrieved, use JS/jQuery to append the options from this data and enable the selects.

BTW Even though year is not an MySql reserved word I would still use back-ticks `year`. In fact, I wouldn't, personally, use year as a field name.


Thanks for the reply andrewsw!:)

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

This are my two scripts now:

index.php

<?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
//**************************************
//     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
Was This Post Helpful? 0
  • +
  • -

#4 Joepiooo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 05-February 10

Re: Dynamic Car Make, Model, Year, Battery dropdown form

Posted 15 January 2013 - 02:30 AM

With some help from others I made the script working as I want it to be

The code below is how its done

Index.php

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

?>


:)/>
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1