PDA

View Full Version : Visible/hidden and Onchange event

ClueLess
12-31-2002, 09:08 PM
I would like to HIDE the table at first time loading. How can I do that? Because, first time loading, the dropdown list is CASE 0; if it is case 0, the table SHOULD NOT be shown.

The code works fine (show and hide table) when I select a diff. cases from a dropdown list…but not at the first time browsing this page. Please see the code below.

Thank you for your help.


<HTML>
<HEAD>
<TITLE>DHTML</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

var isIE = (document.all) ? true : false;
function hideLayer(lay) {
if (isIE)
{
document.all[lay].style.display = "none";
}
}
function showLayer(lay)
{
if (isIE)
{
document.all[lay].style.display = "";
}
}

function changeObjectAppearance(object1)
{
if(document.SubmitForm.selectname.selectedIndex == 4)
showLayer(object1)
else
hideLayer(object1)
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>

<form name="SubmitForm">
<select name="selectname" onchange ="changeObjectAppearance('showbankinfo')">
<option>case 0 - DON'T show table</option>
<option>case 1 - DON'T show table</option>
<option>case 2 - DON'T show table</option>
<option>case 3 - DON'T show table</option>
<option>case 4 - Show table !</option>
</select>
<BR>

Some text
<DIV class="class1" ID="showbankinfo" name="showbankinfo">
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td class="smallHeadingBurg" align="right" name="Name"></font>Name</td>
<td class="regularParagraph">&nbsp;
<input type="text" size="30" maxlength="9" name="name" id="name" value="">
</td>
</tr>
<tr>
<td class="smallHeadingBurg" align="right">Phone:</td>
<td class="regularParagraph">&nbsp;
<input type="text" size="30" name="phone" id="phone" value="">
</td>
</tr>
</table>
</div>

</form>


</BODY>
</HTML>
joeframbach
01-01-2003, 02:20 AM
just add
changeObjectAppearance('showbankinfo')
to the body onLoad. hope it works.
ClueLess
01-02-2003, 02:01 PM
thanks for replying, in the body tag has onload event already. I cannot add another onload even. Do you have another idea how to do it?
Terry
01-02-2003, 02:19 PM
Hi,

Just make your div invisible to start with:


<DIV class="class1" ID="showbankinfo" name="showbankinfo" style="display: none;">


Or do it in your class1 stylesheet.

- Terry
ClueLess
01-02-2003, 03:06 PM
Thank you very much. It works as what I want for the onchange event so far. I have another question.
For example: Sometime when I come to this page, I would like to see CASE 4 first. Is possibility for us to do that? If so, how can we do it?
Thanks in advance again.
Terry
01-02-2003, 03:48 PM
<option selected>case 4 - Show table !</option>


Of course this will show your table since your function changeObjectAppearance is coded to do so.

- Terry
joeframbach
01-02-2003, 04:16 PM
a while ago you said you cant add another onload, well, you can!

<body onload="event1();event2()">
ClueLess
01-02-2003, 05:34 PM
Yes Terry. This ‘onchange’ event works perfectly as what I want.

I think, my 2nd question wasn’t clear so you got confuse.

Besides the ‘onchange’ event, can we do something in JavaScript like:

If Case 4 then
Show table
Else
Don’t show table.

The reason I am looking for this if else statement because it depends on what case that I have in page1.

For example: I have 2 pages:

+ Page 1: shows CASE 0, when I click “Go Page2” ; in page2 - CASE 0 shows in the dropdown list (the table is hidden ) it works for this.

+ If my Page1: shows CASE 4, when I go to Page2, CASE 4 shows in dropdown list, and I would like the table shows as well

CASE4: Right now: Table is NOT showing until I select other cases…. then select CASE 4 again… after selecting CASE 4 again… the table shows.

The question is: Is possible to show and hide table depend on what case that we have by using JavaScript?