combo box selection

[Schammy]

I'm a novice and have 2 problems:

Background:

I have a combo box called "relation" with onchange="evalrelations()" . The combo box is populated with the values: son, father, uncle, grandson etc.

I also have several textboxes which have been set to visibility="hidden"

What I want is that when one selects a name from a combo box, then certain textboxes must become visible.

My Javascript code reads as follows:

function evalrelations()
{
if (document.familyform.relation.value="father")
{
document.familyform.textbox1.style.visibility='visible';
document.familyform.textbox2.style.visibility='visible';
}

if (document.familyform.relation.value="grandfather")
{
document.familyform.textbox3.style.visibility='visible';
document.familyform.textbox4.style.visibility='visible';
}
}

Problem 1:

I am not sure of the correct syntax when making a selection. For example, should my IF statement say TEXT='father', or VALUE='father', or SELECTED='father' etc.?

Problem 2:

If I select "father" then ALL 4 textboxes become visible instead of the 2 that I need. (Is this because 'grandfather' also contains the string 'father'?

[gil davis]

First, only IE allows you to access the value of the option that has been selected using document.familyform.relation.value A cross-browser (and more correct, IMHO) addressing scheme would bedocument.familyform.relation.options[document.familyform.relation.selectedIndex].valueHowever, your real problem in #2 is that you used "=" instead of "==" in your comparison. Basically, both of your IF statements set the value instead of comparing the value, so both IF statements execute the TRUE branch.

As to problem #1, you can use either .value or .text, according to your whim, as long as you respect the case of the string. You could also simply use the document.familyform.relation.selectedIndex, but it would not be as obvious for anyone that may have to modify your work.

[Schammy]

Thanks for your advice. Things are looking a bit better, BUT...

Let's say I have 100 textboxes which are all set to 'invisible'. Now, when I select e.g., "son" then certain boxes become visible. When I select e.g., 'father' then other boxes must become visible, BUT ALL THE OTHER VISIBLE BOXES (made visible by 'son') MUST REVERT TO THEIR INVISIBLE STATUS.

Surely I could do this by somehow inserting a 'reset' function before each IF statement is executed? How would I do this?

[gil davis]

Javascript does not have any built-in functions that can do that. One approach is to use an array to save a pointer to each one you turn on, and then go back through the array and turn them off.

I'm sure if you got ten programmers together and asked that question, you could get at least ten different soulutions, each with varying levels of merit.

If you are asking because you really have no clue, I'll leave it to the other nine programmers, because I have little interest in a form that has 100 text boxes. I'm sorry, but this is my hobby, not my job.

Javascript is a very powerful tool that can be used to enhance a user's experience on the web, or make his life miserable, depending on the author's implementation.