PDA

Click to See Complete Forum and Search --> : OnSelect EventHandler question

mike@spb
August 19th, 2002, 02:32 PM
I previously submitted this thread but the title was wrong.

I am new to javascript and was wondering how and where to add an event handler, OnSelect(), to an option box. Here is what I currently have




<html>
<head>

<SCRIPT LANGUAGE="JavaScript1.2">
function BitRate(){
document.write(<td><Input Tytpe="text" name="BitRate")
}
</SCRIPT>

</head>
<table>
<tr>
<td>
<select name="BitRate">
<option selected value=""></option
<option value="28">28</option>
<option value="56">56</option>
<option value="128'>128</option>
<option value="300">300</option>
<option value=''">Other</option>
</select>
</tr>
</table>


What I want to be able to do is when the user selects "Other" in the option box, another <td> will appear showing a textbox which the user can then enter the bit rate.

Thanks

Mike@spb
ShawnDev
August 19th, 2002, 04:03 PM
First off, your Select tag should be within a Form tag (you'll see why later).

To set/call an event handler, specify the function to call when the event occurs like this:

<select name="BitRate" OnSelect="BitRate();">

(The name attribute is only used to reference the code within Javascript. It has no bearing on what function is called.)

Within the function itself, you will have to identify which selection was chosen before deciding how to act on it:

<SCRIPT LANGUAGE="JavaScript1.2">
function BitRate(){
if (document.forms['formName'].elements['BitRate'].value == '') {
document.write(<td><Input Tytpe="text" name="BitRate");
}
}
</SCRIPT>

It would probably be better to put the extra <td> line on the page to begin with and then just toggle it visible/invisible as you need it. Otherwise, you'll have multiple instances being added each time the user selects Other, then selects something else, then selects Other again, etc.
mike@spb
August 19th, 2002, 04:12 PM
I decided it would be best to add the <TD> in the table and then just toggle whether it's visible or not. But I'm not sure of how to do this.

How would I go about this?

Mike@spb
ShawnDev
August 19th, 2002, 04:21 PM
I suggest you read up on the official Javascript documentation:

http://developer.netscape.com/docs/manuals/index.html?cp=dev01mdoc

Actually, it looks like you'll need to make the table cell part of a Layer, which can be toggled visible/invisible by setting its .visiblility property. Tables themselves don't appear to have a .visibility property.
Zvona
August 20th, 2002, 05:09 AM
Originally posted by mike@spb

[size=1]
<html>
<head>

<script LANGUAGE="JavaScript1.2" type="text/javascript">
function BitRate(){
document.write('<td><input type="text" name="BitRate"')
}
</script>

</head>
<body>
<form action="">
<table>
<tr>
<td>
<select name="BitRate" onselect="">
<option selected="selected" value=""></option>
<option value="28">28</option>
<option value="56">56</option>
<option value="128'>128</option>
<option value="300">300</option>
<option value=''">Other</option>
</select>
</tr>
</table>
</form>
</body>
</html>


Remove red parts and add blue parts at first to gain more standard solution.