select onchange 1

[asealy]

hi,

i need to make a select statement show more fields depending on what i have selected. what it's supposed to do is show or hide a div depending on selection

here is the javascript ----------------------------

<script language=javascript type='text/javascript'>
function hideRent() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('rentform').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.rentform.visibility = 'hidden';
}
else { // IE 4
document.all.rentform.style.visibility = 'hidden';
}
}
}

function hideSale() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('saleform').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.saleform.visibility = 'hidden';
}
else { // IE 4
document.all.saleform.style.visibility = 'hidden';
}
}
}

function showRent() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('rentform').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.rentform.visibility = 'visible';
}
else { // IE 4
document.all.rentform.style.visibility = 'visible';
}
}
}

function showSale() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('saleform').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.saleform.visibility = 'visible';
}
else { // IE 4
document.all.saleform.style.visibility = 'visible';
}
}
}
</script>
----------------------------------------------------------
here is the html ----------------------------------------

<td><SELECT name="saleorrental">
<option value="">Please select</option>
<option value="sale" onchange="showSale()">Sale</option>
<option value="rental" onchange="showRent()">Rental</option>
</SELECT></td>
</tr>
<div id="saleform">
<? if ($saleorrental == "sale"){ ?>
<tr valign="top">
<td><font color="#FF0000">*</font>Price</td>
<td> <input name="price" type="text" id="price"> </td>
</tr>
<tr valign="top">
<td><font color="#FF0000">*</font>Buy Costs</td>
<td><input name="buycosts" type="text" id="buycosts"></td>
</tr>
<tr valign="top">
<td><font color="#FF0000">*</font>Expected re-sale</td>
<td><input name="expectedresale" type="text" id="expectedresale"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font color="#FF0000">* </font>Mandatory Fields </td>
</tr>
<tr>
<td> <input type="submit" name="Submit" value="Submit"> <input type="reset"
name="cancel" value="Reset"> </td>
<td>&nbsp;</td>
</tr>
</div>
<!--<? } if ($saleorrental == "rent"){ ?>-->
<div id="rentform">
<tr align="left" valign="top">
<td class="results">Rent PCM:</td>
<td colspan="2" class="results"><input name="rent" type="text" id="rent">
</td>
</tr>
<tr align="left" valign="top">
<td class="results">Mortgage:</td>
<td colspan="2" class="results"><input name="mortgage" type="text" id="expectedresale3">
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><font color="#FF0000">* </font>Mandatory Fields </td>
</tr>
<tr>
<td> <input type="submit" name="Submit" value="Submit"> <input type="reset"
name="cancel" value="Reset"> </td>
<td>&nbsp;</td>
</tr>
</div>
----------------------------------------------------------

does anyone know how to make it work or know of a better way to do it?

thanks

 

[BillyRayPreachersSon]

A better way would be to ditch all that cross-browser crap and go for simple up-to-date code that doesn't take into account archaic v4 broswers. Using "document.getElementById" would be the best bet...

Your main error is that you have the "onchange" on the option elements, whereas you really need it on the select element. Then, you need to pick up on the value passed - something like this:

<select onchange="showFields(this.value);">

Then have one function that shows/hides depending on the value passed in.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[asealy]

thanks alot. i got that script off the internet. don't understand any of it.

i'm gonna be a little bit cheeky now if and only if you have a little spare time, any chance you can write it for me?? i really ain't got a clue how to write it. i'm a complete novice. i just know what i want but not how to do it.

cheers either way

 

[monksnake]

i'm gonna be a little bit cheeky now if and only if you have a little spare time, any chance you can write it for me??

WTF??

BillyRay, can you write me a function to do my job for me too??

If you do, I'll get paid for doing my job and I may even give you a star!!!!

<.

 

[asealy]

mr snake. you again. why is it that you love butting in?? it's a personal project. i ain't getting paid for it. just trying to learn by giving myself a project

 

[BillyRayPreachersSon]

If you use the syntax I gave above, and make sure the id of your DIV elements begins with the value in each of your options (e.g. "rental", "rentalDiv", "sales", "salesDiv", etc), then using this function should work:

function showFields(whichDiv) {
   document.getElementById(whichDiv + 'div').style.display = 'block';
}

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[asealy]

thanks a lot dan, i'll give that a go. thanks for your time. i won't bother you further