Remember selected form values after submit

PHP
1

Hello,

Yesterday I posted something about a wheel configurator… I tried something with things I allready made a time ago… But I want to remember the slected form values…

I cant make my form to remember the values I selected…

Can somebody help me? I googled some things but it doesnt work

This is my func file:

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

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

?>

And this is my Index;

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

Any help would be welcome

Thanks in advance!:slight_smile:

2

Depends what you mean by ‘remember the values’

If you want to store the data, your action file could write it to a text file, from where it can be retrieved at will

Or do you mean the form retains the data when the user hits the back button?

3

Hello,

Thanks for the fast reply!:slight_smile:

It is a chained dropdown box and when you press submit you get the selected car / model / year / color in a <div>

But after submit you can start all over with the chained dropdown… But I want to remember the submitted values so I can change the color very easy without going trough the whole dropdowns again…

Is this possible?

4

Ok,

I got the first dropdown fixed…

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

But that won’t work when I use it with the others…