Keep everything in chained dropdown selected after submit

Hello,

I’m stuck with this script I’m using:

index.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" />
        <link href="includes/css/style.css" type="text/css" rel="stylesheet" />
        <link href="includes/css/wt-gallery.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="includes/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="includes/js/configuratie.js"></script>
        <script type="text/javascript" src="includes/js/jquery.wt-gallery.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;
	});
	$('#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("finishAjax3('result_3', '"+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 finishAjax3(id, response) {
  $('#wait_3').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();
}
function finishAjax_tier_five(id, response) {
  $('#wait_4').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>
        </head>
<?php
$website = "it";
	// configuratie file en db connect
include "includes/inc/config.inc.php";
include('db.php');
include_once "class/slider.class.php";
include('func.php');
$slideralbum = new slideralbum($dbo);
$sliders = $slideralbum->getSliderItems($website);
?>
<body>
<p>
<form name="product" 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>
	<span id="wait_4" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_4" style="display: none;"></span>
  <INPUT TYPE="button" VALUE="Refresh" onclick='location.reload()'>
</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'];
	$drop_5 = $_POST['drop_5'];
?>
<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>Kleur:</td>
		<td><?php echo $drop_4;?></td>
	</tr>
</table>
<?php
}
?>
<div id="banner-block">       <!-- Begin of Slideshow -->
	<div class="container">
		<div class="wt-gallery" style="width:920px; height:375px;">
			<div class="main-screen">
                                <?php if(isset($_POST['submit'])){
	$drop = $_POST['drop_1'];
	$drop_2 = $_POST['drop_2'];
	$drop_3 = $_POST['drop_3'];
	$drop_4 = $_POST['drop_4'];
	$drop_5 = $_POST['drop_5'];
?>
                    <img src="images/<?php echo $drop_5;?>" alt="<?php echo $drop_5;?>" width="920" height="360"/>
<?php
					}
?>
				<noscript>
 				<!-- placeholder image when javascript is off -->
 				<img src="../images/triworks_abstract27.jpg" alt=""/>
				</noscript>
			</div>
			<div class="cpanel">
			<div class="thumbs-back"></div>
				<div class="thumbnails">
					<ul>
<?php $sliders = $slideralbum->getSliderItems($website, NULL);
foreach($sliders as $slider){
?>
						<li effect="none">
					<div>
						<a href="<?php echo $slider->slider_img; ?>" height="360" width="720" alt="<?php echo $slider->slider_img; ?>" />
						<img src="<?php echo $slider->slider_tmb; ?>" height="70" width="125" alt="<?php echo $slider->slider_tmb; ?>" />
						</a>
					</div>
					<div class="data">
					</div>
						</li>
<?php
}
?>
					</ul>
				</div>        	
			<div class="thumbs-fwd"></div>
		</div>
	</div>
</div>
</div>
</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 ))

		{
?>
<option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' : '' ; ?>><?php echo $tier['make'];?></option>
<?php
		
		}

}

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

//**************************************
//     Third 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 DISTINCT color 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 Kleur</option>';

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

//**************************************
//     Fourth selection results     //
//**************************************
if(isset($_GET['func'])&& $_GET['func'] == "drop_4" ) {
drop_4($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3'], $_GET['drop_var4']);
}
function drop_4($drop_var, $drop_var2, $drop_var3, $drop_var4)
{
    include_once('db.php');
        $result = mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3' AND color='$drop_var4'")
    or die(mysql_error());
	


		   while($drop_5 = mysql_fetch_array( $result ))
				{
				if ($drop_5['img'] != "") {
			  echo '<input type="checkbox" name="drop_5" id="drop_5" style="display:none;" checked value="'.$drop_5['img'].'"/>';
			
				}
  }
    echo '<input type="submit" name="submit" value="Submit" />';
}

?>

After I selected all my dropdown items and press submit it is working good but all the selected values are gone…

If you want to change color you have to go to the whole dropdown list again. Is it possible to keep all the selected values after submit?

Thanks in advance

Kind Regards

Joep

Yes. You have to recreate them. It’s a bit different for the various types of input fields. Suppose you have a ‘name’ text input field. I would recreate the submitted data with something like:

<input type="text" name="name" value="<?php echo $_POST['name']; ?>">

Radio buttons and check boxes need to be “checked”, options need to be “selected”. Of course, you need to make sure the code is safe, I’m just showing the basic mechanics of it.