PDA

Click to See Complete Forum and Search --> : onchange event

esk
September 27th, 2005, 10:43 AM
need to modify this code:

<script type="text/javascript" language="Javascript">
function Navlink() {
var list = document.myform.ddOffices;
var listValue = list.options[list.selectedIndex].value;
obj=document.getElementById(listValue);
if (obj.style.display=='block') {
obj.style.display='none';
}
else {
obj.style.display='block';
}
}
</script>

to show and hide tables lower down depending on dd selection...
this works to a degree but i need to hide the table that has been displayed if another selection in the list is made.

There are gonna be about 20 tables with the ID="office name" style="display: none;"

e.g

<select name="ddOffices" class="selecttag" id="ddOffices" onchange='Navlink()'>
<option value="none" selected>please select an office</option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
</select>

<table id="name1" style="display: none;"><tr><td></td></tr><table>
<table id="name2" style="display: none;"><tr><td></td></tr><table>
<table id="name3" style="display: none;"><tr><td></td></tr><table>
<table id="name4" style="display: none;"><tr><td></td></tr><table>

and each needs to be hidden and displayed on the onchange event in the ddList
hepi
September 27th, 2005, 12:59 PM
Hi,

Save the id of the currently displayed element in a hidden input field an read it at the moment when a new onchange event takes places. Then hide the old table and show the new table. Write the id of the new table to the hidden field.

Best regards,
Henning
esk
September 28th, 2005, 06:58 AM
nice idea....
not sure how to implement it though.........
I am no top range developer by any standard:

got this though.....
<script type="text/javascript" language="Javascript">
function Navlink() {
var list = document.myform.ddOffices;
var listValue = list.options[list.selectedIndex].value;
var ddlist = document.myform.ddOfficeName.value;
//window.open(listValue,null, "height=150,width=200,left=120,top=340,status=yes,toolbar=no,menubar=no,location=no");
obj = document.getElementById(listValue);
tblDisplay = obj.style.display;
alert(ddlist);
alert(listValue);
alert(tblDisplay);
if (document.myform.ddOfficeName.value='none') {
obj.style.display='block';
document.myform.ddOfficeName.value='block'
}
else {
obj.style.display='none';
document.myform.ddOfficeName.value='none'
//obj.style.display='none';
}
//obj.style.display='block';
}
</script>
and i have added a hidden field:
<table id="officename1" style="display: none;" cellpadding="0" cellspacing="0" border="0" width="50%">
<tr><td>
<input name="ddOfficeName" value="hidden" type="hidden">
</td></tr>
<tr><td>
<table class="tableborder" width="50%" border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap class="bodyfont" colspan="2">officename1</td></tr>
esk
September 29th, 2005, 10:47 AM
anyone???
PeejAvery
September 29th, 2005, 05:31 PM
Is this the idea behind what you are trying to do?

<html>
<script language="JavaScript">
var tablenum;

tablenum = 10; //Number of tables
function setuptables(){
for (x=1;x<tablenum+1;x++){
obj = document.getElementById(x);
obj.style.display = "none";
}
}

function change(which){
for (x=1;x<tablenum+1;x++){
obj = document.getElementById(x);
obj.style.display = "none";
if(x==which){
obj = document.getElementById(which);
obj.style.display = "block";
}}}
</script>
<body onload="setuptables()">

<table cellpadding=2 cellspacing=0 border=0>

<tr>
<td valign="top"><input type="button" value=" + " onclick="change('1')" class="option"></td>
<td>
<div id="1">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('2')" class="option"></td>
<td>
<div id="2">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('3')" class="option"></td>
<td>
<div id="3">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('4')" class="option"></td>
<td>
<div id="4">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('5')" class="option"></td>
<td>
<div id="5">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('6')" class="option"></td>
<td>
<div id="6">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('7')" class="option"></td>
<td>
<div id="7">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('8')" class="option"></td>
<td>
<div id="8">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('9')" class="option"></td>
<td>
<div id="9">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top"><input type="button" value=" + " onclick="change('10')" class="option"></td>
<td>
<div id="10">
<table cellpadding=5 cellspacing=0 border=0>
<tr><td>First Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" value=""></td></tr>
<tr><td>Comment:</td><td><textarea rows=5 cols=40></textarea></td></tr>
</table>
</div>
</td>
</tr>

</table>

</body>
</html>
esk
September 30th, 2005, 06:36 AM
that is what i am looking to happen with the table:
just not using buttons but using a select tag that does the job of the seperate buttons:

<select name="ddlist" onChange="change()">
<option selected id="0" value="0">please select a location</option>
<option id="1" value="1">table1</option>
<option id="2" value="2">table2</option>
<option id="3" value="3">table3</option>
<option id="4" value="4">table4</option>
<option id="5" value="5">table5</option>
<option id="6" value="6">table6</option>
</select>
PeejAvery
September 30th, 2005, 07:31 AM
Close. Just change what you have to this.

<select name="ddlist" onChange="change(this.value)">
<option selected id="0" value="0">please select a location</option>
<option value="1">table1</option>
<option value="2">table2</option>
<option value="3">table3</option>
<option value="4">table4</option>
<option value="5">table5</option>
<option value="6">table6</option>
</select>
esk
September 30th, 2005, 08:39 AM
0.o

nice stuff peejavery.........
tnx a lot...
PeejAvery
September 30th, 2005, 10:47 AM
Not a problem.