A select drop-down that appears/disappears according to previous selection.

[pk]

Here is my code, and it's not working. Please help me get through
this. I've read every single tutorial and you may even see remnants of
some of their variables in my code. I don't know if I'm close, but I
feel that I'm getting there.

Thanks in advance for any help. I much appreciate it.

-pk

<SCRIPT>

function able(dropdown)
{
var myindex = dropdown.select edIndex
if(myindex = 1) {
MMDiv.style.vis ibility='visibl e';
mainform.BalSte p.focus();
}
else {
MMDiv.style.vis ibility='hidden ';
}

</SCRIPT>

<Form Name="myform">
<tr>
<td height="7" width="177">
<div align="right">< font color="#000000" face="Comic Sans MS">Boring
Type:</font></div>
</td>
<td height="7" width="397"><di v align="left"><f ont color=#000000
face="Comic Sans MS">

<select name=Finish onchange='able( this.form.Finis h);'>
<option></option>
<option>Rough </option>
<option>Finis h</option>
</select></font></div></td>

<DIV ID="MMDiv" style="visibili ty:hidden">
<LABEL FOR="BalStep">
<SELECT name=BalStepVal >
<option></option>
<option>Balance d Cutting</option>
<option>Step Cutting</option>
</SELECT>
</DIV>
</FORM>
</tr>

[Lee]

pk said:

Here is my code, and it's not working. Please help me get through
this. I've read every single tutorial and you may even see remnants of
some of their variables in my code. I don't know if I'm close, but I
feel that I'm getting there.

Thanks in advance for any help. I much appreciate it.

-pk

<SCRIPT>

The SCRIPT tag requires a "type" attribute:

<script type="text/javascript">

function able(dropdown)
{
var myindex = dropdown.select edIndex
if(myindex = 1) {
The "=" sign is the assignment operator, not the comparison
operator. You want:
if (myindex == 1) {
MMDiv.style.vis ibility='visibl e';
Don't refer to a page element by its ID value as if it were global.
It is in some browsers, but it's non-standard and poor practice.

document.getEle mentById("MMDiv ").style.visibi lity="visible";
mainform.BalSte p.focus();

The same goes for forms, although they can be referred to as
attributes of the document, as in:

document.mainfo rm.BalStep.focu s();
<select name=Finish onchange='able( this.form.Finis h);'>

The value of the name attribut should be in quotes.
The keyword "this" is already a reference to "Finish":

<select name="Finish" onchange="able( this)">

[pk]

Hmm, I wasn't very close at all. I'm still not getting it. My code
appears as follows now. There is still no observable behavior. :(

<SCRIPT type="text/javascript"> >

function able(dropdown)
{
var myindex = dropdown.select edIndex
if(myindex == 1) {

document.getEle mentById("MMDiv ").style.visibi lity="visible";
document.mainfo rm.BalStep.focu s();
}
else
{
document.getEle mentById("MMDiv ").style.visibi lity='hidden';
}

</SCRIPT>
<Form Name="myform">
<tr>
<td height="7" width="177">
<div align="right">< font color="#000000" face="Comic Sans MS">Boring
Type:</font></div>
</td>
<td height="7" width="397"><di v align="left"><f ont color=#000000
face="Comic Sans MS">

<select name="Finish" onchange='able( this);'>
<option></option>
<option>Rough </option>
<option>Finis h</option>
</select></font></div></td>

<DIV ID="MMDiv" style="visibili ty:hidden">
<LABEL FOR="BalStep">
<SELECT name=BalStepVal >
<option></option>
<option>Balance d Cutting</option>
<option>Step Cutting</option>
</SELECT>
</DIV>
</FORM>
</tr>

[ASM]

pk wrote:

Here is my code, and it's not working. Please help me get through
this. I've read every single tutorial and you may even see remnants of
some of their variables in my code. I don't know if I'm close, but I
feel that I'm getting there.

Thanks in advance for any help. I much appreciate it.

-pk

<SCRIPT>

function able(dropdown)
{
var myindex = dropdown.select edIndex
if(myindex = 1) {
MMDiv.style.vis ibility='visibl e';
document.getEle mentById('MMDiv ').style.visibi lity='visible';
mainform.BalSte p.focus();
}
else {
MMDiv.style.vis ibility='hidden ';
document.getEle mentById('MMDiv ').style.visibi lity='';
}

</SCRIPT>

<Form Name="myform">
<tr>
<td height="7" width="177">
<div align="right">< font color="#000000" face="Comic Sans MS">Boring
Type:</font></div>
</td>
<td height="7" width="397"><di v align="left"><f ont color=#000000
face="Comic Sans MS">

<select name=Finish onchange='able( this.form.Finis h);'>
<option></option>
<option>Rough </option>
<option>Finis h</option>
</select></font></div></td>

<DIV ID="MMDiv" style="visibili ty:hidden">
<LABEL FOR="BalStep">
<SELECT name=BalStepVal >
<option></option>
<option>Balance d Cutting</option>
<option>Step Cutting</option>
</SELECT>
</DIV>
</FORM>
</tr>

--
Stephane Moriaux et son [moins] vieux Mac

[Randy Webb]

ASM said the following on 8/30/2005 8:47 PM:

pk wrote:

Here is my code, and it's not working. Please help me get through
this. I've read every single tutorial and you may even see remnants of
some of their variables in my code. I don't know if I'm close, but I
feel that I'm getting there.

Thanks in advance for any help. I much appreciate it.

-pk

<SCRIPT>

function able(dropdown)
{
var myindex = dropdown.select edIndex
if(myindex = 1) {

if (myIndex==1)

== is comparison
= is setting the variable.

Since it can set the var myindex to 1, it will always evaluate as true
so you never get to the else branch.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[pk]

OK, when I initially posted this, I didn't think I was all that close
to having it work. Now I swear it should be working, but it's not.
I'm posting some simplified code with comments of my thought process
(SCARY!). Tell me where I went wrong please. :) (These comments don't
truly exist in my code, I added them for insight. They're commented
Java-style since I don't write in HTML or JavaScript.)

Thanks for helping. I realize this is frustrating and you probably
just want to tell me to go read a JavaScript book.

<html>
<SCRIPT type="text/javascript"> >

function able(dropdown)

{
var myindex =
document.myform .dropdown.optio ns[document.myform .dropdown.selec tedIndex].value
// the line above put the value of my dropdown menu selection in the
variable myindex. this value will be 0, 1, or 2.
if(myindex == 1) {
document.getEle mentById('BalSt epDiv').style.v isibility="visi ble";
document.myform .BalStepVal.foc us();
// in the case that myindex is equal to 1, i would like
to set the BalStepDiv <div> to visible.
}
else {
document.getEle mentById('BalSt epDiv').style.v isibility="hidd en";
// in the case that myindex is not equal to 1, i would
like to set the BalStepDiv <div> to hidden.
}

</SCRIPT>

<body>
<Form Name="myform">
Test Select:
<select name="Finish" onchange='able( this);'>
<option></option> //selectedIndex == 0
<option>Rough </option> //selectedIndex == 1
<option>Finis h</option> //selectedIndex == 2
</select>

<div id=BalStepDiv style="visibili ty:hidden;">
// the line above sets everything between the <div> </div> tags to
hidden, until that is changed by the function above.
<select name=BalStepVal >
<option></option>
<option>Balance d Cutting</option>
<option>Step Cutting</option>
</select>
</div>
</form>
</body>
</html>

[pk]

BINGO! I understand how this works now.
Instead of var myindex =
document.myform .dropdown.optio *ns[document.myform .dropdown.se*le ctedIndex].value
;
i changed it to
var myindex = document.myform .Finish.selecte dIndex;

I finally see how the naming convention works. Thanks for your help.

[ASM]

Randy Webb wrote:

ASM said the following on 8/30/2005 8:47 PM:

if(myindex = 1) {

if (myIndex==1)

== is comparison

yeap, I didn't fix it
but others did

--
Stephane Moriaux et son [moins] vieux Mac