Using dependent dropdowns and still retain user input in a form

[Bels]

I am currently designing a real estate website using Dreamweaver CS3, php, MySQL on a Mac. On it is a 'property search' form that queries the property database. The form consists of 5 dropdown lists. The first dropdown (buy or let) is a parent list and the 3rd and 4th dropdowns (minimum price and maximum price) are child lists - they are dependent on what is chosen in the 1st dropdown. I have got it working with an onchange event and javascript but I am experiencing problems when it comes to retaining the information the user has put into the form. It all works fine except for when the user choose 'let' (in 1st dropdown) it's min and max prices are not retained because their values are found in the javascript.

Is there not an easier way of doing a parent child dropdown and retaining the choice the user has made from page to page? Do I use hidden fields? I can't populate the drop downs dynamically as minimum and maximum prices are not in the database - there is just a single price for the property.

Can anyone help?

Thanks

[cameraman]

Welcome to Webmaster World, Bels!
I'm a little unclear as to where you're losing them - since you're using javascript I'm inferring that you're not doing a page change when the user selects buy/let, but then your second paragraph asks about page to page.

You could save the values in the SESSION, or in a database, or send them back in hidden fields.

You can also make php 'communicate' with javascript by having it echo the values for it to pick up. Let's assume that you're doing a page change and you've gotten the values with $_POST['min'] and $_POST['max']. On the new output, you can do something like this:
<?php
echo "<script type=\"text/javascript\">\n";
echo "var min=" . $_POST['min'] . ";\n";
echo "var max=" . $_POST['max'] . ";\n";
echo "</script>";

Then you can pick the values back up as javascript variables min and max. Does that help or am I misunderstanding completely?

[Bels]

Thanks cameraman for your response.I think you are on the right track.

I am using an onchange event on the 1st dropdown (buy/let) and session values to retain user input when moving from the search page when form is submitted to the results page.

Is there a way of showing you the code I am using for my form and the javascript? is it OK for me to add it to the reply?

[Bels]

Here is my code - if you don't mind having a look see where I may be going wrong.

// Javascript for onchange event

<Script>
function drop() {
var l;
l = document.form1.varminprice

// Here Define the Option's for the Second Drop down menu

var Let = new Array("– Select one option –","£50 per week","£100 per week","£150 per week","£200 per week","£250 per week","£300 per week","£350 per week","£400 per week","£450 per week")
var Buy = new Array("– Select one option –","£100,000","£200,000","£300,000","£400,000","£500,000","£750,000","£1,000,000")

// here Test it the Let From the First Drop Down menu is Selected

if(document.form1.varsaleorlet.options[document.form1.varsaleorlet.options.selectedIndex].text=="Let"){
l.length=0
for(i=0; i<Let.length; i++) {
document.form1.varminprice.options[i] = new Option(Let[i])
document.form1.varmaxprice.options[i] = new Option(Let[i])
}
return;
}

// End First Drop down menu here

else if(document.form1.varsaleorlet.options[document.form1.varsaleorlet.options.selectedIndex].text=="Buy"){
l.length=0

for(i=0; i<Buy.length; i++) {
document.form1.varminprice.options[i] = new Option(Buy[i])
document.form1.varmaxprice.options[i] = new Option(Buy[i])

}

return;
}

else {
l.length=0;
}

}
// End Function here for the Second Drop Down

</Script>

// my search form

<td valign="top"><form accept-charset="utf-8" id="form1" name="form1" method="get" action="results.php">
<label for="varsaleorlet">Buy or Let:</label>
<select name="varsaleorlet" class="value" id="varsaleorlet" onchange="drop()">
<option value="">&ndash; Select one option &ndash;</option>
<option value="buy"<?php echo ('buy' == $_SESSION['varsaleorlet'] ? ' selected="selected"' : '' ) ?>>Buy</option>
<option value="let"<?php echo ('let' == $_SESSION['varsaleorlet'] ? ' selected="selected"' : '' ) ?>>Let</option>
</select>
<br/>
<br/>
<label for="vararea">Area:</label>
<select name="vararea" class="value" id="vararea">
<option selected="selected">&ndash; Select one option &ndash;</option>
<option value="SW11"<?php echo ('SW11' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW11</option>
<option value="SW12"<?php echo ('SW12' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW12</option>
<option value="SW16"<?php echo ('SW16' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW16</option>
<option value="SW17"<?php echo ('SW16' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW17</option>
<option value="SW18"<?php echo ('SW18' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW18</option>
<option value="SW4"<?php echo ('SW4' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW4</option>
<option value="SW6"<?php echo ('SW6' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW6</option>
<option value="SW8"<?php echo ('SW8' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW8</option>
<option value="SW9"<?php echo ('SW9' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>SW9</option>
<option value="all"<?php echo ('all' == $_SESSION['vararea'] ? ' selected="selected"' : '' ) ?>>All Areas</option>
</select>
<br />
<br />
<label for="varminprice">Minimum Price</label>
<select name="varminprice" size="1" class="value" onchange="drop2(this)">
<option>&ndash; Select one option &ndash;</option>
<option value="£100,000"<?php echo ('£100,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£100,000</option>
<option value="£200,000"<?php echo ('£200,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£200,000</option>
<option value="£300,000"<?php echo ('£300,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£300,000</option>
<option value="£400,000"<?php echo ('£400,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£400,000</option>
<option value="£500,000"<?php echo ('£500,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£500,000</option>
<option value="£750,000"<?php echo ('£750,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£750,000</option>
<option value="£1,000,000"<?php echo ('£1,000,000' == $_SESSION['varminprice'] ? ' selected="selected"' : '' ) ?>>£1,000,000</option>
</select>
<br />
<br />
<label for="varmaxprice">Maximum Price</label>
<select name="varmaxprice" class="value" id="varmaxprice">
<option selected="selected">– Select one option –</option>
<option value="£200,000"<?php echo ('£200,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£200,000</option>
<option value="£300,000"<?php echo ('£300,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£300,000</option>
<option value="£400,000"<?php echo ('£400,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£400,000</option>
<option value="£500,000"<?php echo ('£500,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£500,000</option>
<option value="£750,000"<?php echo ('£750,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£750,000</option>
<option value="£1,000,000"<?php echo ('£1,000,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£1,000,000</option>
<option value="£2,000,000"<?php echo ('£2,000,000' == $_SESSION['varmaxprice'] ? ' selected="selected"' : '' ) ?>>£2,000,000</option>
</select>
<br />
<br />
<label for="varbedrooms">No. of Bedrooms</label>
<select name="varbedrooms" class="value" id="varbedrooms">
<option>– Select one option –</option>
<option value="Studio"<?php echo ('Studio' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>Studio</option>
<option value="1"<?php echo ('1' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>1</option>
<option value="2"<?php echo ('2' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>2</option>
<option value="3"<?php echo ('3' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>3</option>
<option value="4"<?php echo ('4' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>4</option>
<option value="5"<?php echo ('5' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>5</option>
<option value="6+"<?php echo ('+6' == $_SESSION['varbedrooms'] ? ' selected="selected"' : '' ) ?>>6+</option>
</select>
<br />
<br />
<label for="search"></label>
<input name="search" type="submit" class="value" id="search" value="SEARCH" />
<input name="reset" type="reset" class="value" id="reset" value="NEW SEARCH" />
</form></td>

[cameraman]

It looks like you're always setting it up for buy - I think the easiest thing would be to check from php whether it's buy or let and then display the correct list with the appropriate item selected.

The only other way would be to pass the variables to javascript like I did above and then use an onload event to basically do what the onchange event is doing, plus selecting the appropriate item.

Also, since I'm a lazy slob, I'd put the values in arrays and use a loop to pick them up:
$buymin = array(100,200,300...);
$letmin = array(50,100,150...);
if($varsaleorlet == 'buy') {
$vals = &$buymin;
$suff = '';
}
else {
$vals = &$letmin;
$suff = ' per week';
}

foreach($vals as $v) {
echo '<option value="£$v"';
if($v == substr($_SESSION['varminprice'],1)) echo ' selected="selected"';
echo '>£' . number_format($v) . "$suff</option>\n";
}

And since I'm even lazier than that, I'd stick the foreach into a function and call it twice - then there's no need to set the reference in $vals, since it would become an argument for the function (as well as the comparison value in session).

[Bels]

Hi cameraman - thanks for the advice.

Have been having a look at your suggestion but as I am new to php and javascript can you be a little more specific in how I change my code or where I insert the various bits you have provided? Basically spell it out to me if that is OK.