Board index » Visual Studio » Using a Dropdown Menu to show/hide table rows onChange

rquintana

Using a Dropdown Menu to show/hide table rows onChange

Visual Studio342
Hi -



I'm having a difficult time manipulating the display property with

VBScript in this instance. When the end user selects any of the

dropdown options, some or all of the rows under it should be hidden.

I've just posted here the code that is bothering me - the calculations

themselves have worked just fine so I'll not fill up extra space.



<html>

<head>

<title>Julian Day Calculator</title>



<SCRIPT LANGUAGE="vbscript">

Sub frmMethod_onChange()

with document.form1

'to show or hide (un)necessary table rows

if .frmMethod.value = "Julian" then

.Dayrow.style.display = "none"

.Daterow.style.display = "none"



else if .frmMethod.value = "Billing" then

.Dayrow.style.display = "block"

.Daterow.style.display = "none"



Else

.Dayrow.style.display = "none"

.Daterow.style.display = "block"



end sub



</script>

</Head>



<FORM NAME="form1"><center>

<table name="mytable">

<tr>

<td align=right>

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">Enter a

Date (MM/DD/YY):&nbsp;</font>

</td>

<td><INPUT TYPE="text" NAME="inputdate">

<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16"

height="16" border="0" alt="Click Here to Choose the date"></a>

</td><tr>

<br>



<tr>

<td align=right><font size="2" face="Verdana, Arial, Helvetica,

sans-serif">Options:&nbsp;</font></td>

<td>

<SELECT NAME="frmMethod" SIZE="1">

<OPTION VALUE="Julian">Calculate Julian Day</OPTION>

<OPTION VALUE="Billing">Calculate a future date by number of

days</OPTION>

<OPTION VALUE="Difference">Calculate the number of days between 2

dates</OPTION>

</SELECT>

</td></tr>







<tr id="Dayrow">

<td align=right>

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">Number

of days:&nbsp;</font>

</td>

<td>

<INPUT TYPE="text" NAME="inputdays" Value="">

</td>

</tr>





<tr id="Daterow">

<td align=right>

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">Enter

2nd Date:&nbsp;</font>

</td>

<td>

<INPUT TYPE="text" NAME="inputdate2" Value="MM/DD/YY">

<a href="javascript:cal2.popup();"><img src="img/cal.gif" width="16"

height="16" border="0" alt="Click Here to Choose the date"></a>

</td>

</tr>





</table>

<BR>



<INPUT TYPE="submit" NAME="cmdButton1" Value="Click HERE to

calculate"></form>

</body>

</html>





Any suggestions?

I appreciate your help


-
 
McKirahan

Registered User

Mon Aug 23 15:08:16 CDT 2004

Re:Using a Dropdown Menu to show/hide table rows onChange

"Aaron" <bassvocal@juno.com>wrote in message

Quote
Hi -



I'm having a difficult time manipulating the display property with

VBScript in this instance. When the end user selects any of the

dropdown options, some or all of the rows under it should be hidden.

I've just posted here the code that is bothering me - the calculations

themselves have worked just fine so I'll not fill up extra space.



<html>

<head>

<title>Julian Day Calculator</title>



<SCRIPT LANGUAGE="vbscript">

Sub frmMethod_onChange()

with document.form1

'to show or hide (un)necessary table rows

if .frmMethod.value = "Julian" then

.Dayrow.style.display = "none"

.Daterow.style.display = "none"



else if .frmMethod.value = "Billing" then

.Dayrow.style.display = "block"

.Daterow.style.display = "none"



Else

.Dayrow.style.display = "none"

.Daterow.style.display = "block"



end sub



</script>

</Head>



<FORM NAME="form1"><center>

<table name="mytable">

<tr>

<td align=right>

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">Enter a

Date (MM/DD/YY):&nbsp;</font>

</td>

<td><INPUT TYPE="text" NAME="inputdate">

<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16"

height="16" border="0" alt="Click Here to Choose the date"></a>

</td><tr>

<br>



<tr>

<td align=right><font size="2" face="Verdana, Arial, Helvetica,

sans-serif">Options:&nbsp;</font></td>

<td>

<SELECT NAME="frmMethod" SIZE="1">

<OPTION VALUE="Julian">Calculate Julian Day</OPTION>

<OPTION VALUE="Billing">Calculate a future date by number of

days</OPTION>

<OPTION VALUE="Difference">Calculate the number of days between 2

dates</OPTION>

</SELECT>

</td></tr>







<tr id="Dayrow">

<td align=right>

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">Number

of days:&nbsp;</font>

</td>

<td>

<INPUT TYPE="text" NAME="inputdays" Value="">

</td>

</tr>





<tr id="Daterow">

<td align=right>

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">Enter

2nd Date:&nbsp;</font>

</td>

<td>

<INPUT TYPE="text" NAME="inputdate2" Value="MM/DD/YY">

<a href="javascript:cal2.popup();"><img src="img/cal.gif" width="16"

height="16" border="0" alt="Click Here to Choose the date"></a>

</td>

</tr>





</table>

<BR>



<INPUT TYPE="submit" NAME="cmdButton1" Value="Click HERE to

calculate"></form>

</body>

</html>





Any suggestions?

I appreciate your help



Remove "." before "Dayrow" and "Daterow".



<html>

<head>

<title>Julian Day Calculator</title>

<script type="text/vbscript">

Sub frmMethod_onChange()

'to show or hide (un)necessary table rows

With document.form1

If .frmMethod.value = "Julian" Then

Dayrow.style.display = "none"

Daterow.style.display = "none"

ElseIf .frmMethod.value = "Billing" Then

Dayrow.style.display = "block"

Daterow.style.display = "none"

Else

Dayrow.style.display = "none"

Daterow.style.display = "block"

End If

End With

End Sub

</script>

<style type="text/css">

td { font-family:Verdana,Arial,Helvetica,Sans-Serif }

</style>

</head>

<body>

<center>

<form name="form1">

<table name="mytable">

<tr>

<td align="right">Enter a Date (MM/DD/YY) : &nbsp;</td>

<td>

<input type="text" name="inputdate">

<a href="javascript:cal1.popup();"><img src="img/cal.gif" width="16"

height="16" border="0" alt="Click Here to Choose the date"></a>

</td>

<tr>

<tr>

<td align="right">Options : &nbsp;</td>

<td>

<select name="frmMethod" size="1">

<option value="Julian">Calculate Julian Day</option>

<option value="Billing">Calculate a future date by number of

days</option>

<option value="Difference">Calculate the number of days between 2

dates</option>

</select>

</td>

</tr>

<tr id="Dayrow">

<td align="right">Number of days : &nbsp;</td>

<td>

<input type="text" name="inputdays" value="">

</td>

</tr>

<tr id="Daterow">

<td align="right">Enter 2nd Date : &nbsp;</td>

<td>

<input type="text" name="inputdate2" value="MM/DD/YY">

<a href="javascript:cal2.popup();"><img src="img/cal.gif" width="16"

height="16" border="0" alt="Click Here to Choose the date"></a>

</td>

</tr>

</table>

<br>

<input type="submit" name="cmdButton1" value="Click HERE to calculate">

</form>

</center>

</body>

</html>



Also:

1) Missing <body>tag ;

2) "ElseIf" not "Else If";

3) No "<br>" tags between rows;

4) You could use CSS (as I did) instead of:

<font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font>





-
McKirahan

Registered User

Mon Aug 23 15:12:04 CDT 2004

Re:Using a Dropdown Menu to show/hide table rows onChange

{snip]



Also:

5) no "End If" and "End With".





-

bassvocal

Registered User

Tue Aug 24 07:43:05 CDT 2004

Re:Using a Dropdown Menu to show/hide table rows onChange

Thank you!!!!



I knew that it had to be some small details. Thank you so much for

checking my work - I sincerely appreciate it.





Aaron

-