Javascript: onSelect event

neocode
neocode used Ask the Experts™
on
Hello Folks,

I have a question about JS. I am trying to achieve the following.

I have a <select> list with 4 options viz US, Canada, China and Other. Lets call it List1. I have a second list, List2, whose values depend on List1.

Now whenever user chooses US, Canada or China from List1, the options in the List2 changes. I got this part working.
Have a look here, http://verticalinsanity.com/ws/states2.html
Now, the 4th option, Other, in List1 is for the user to enter their own values if their choice is not in the list. So somehow when the user selects 'Other', i want them to be able to enter whatever they want in a text field.
Is there a way to write a function that whenever the user selects 'Other', the list box changes to a text box? Or is there any other way to accomplish that?

Thanks a million to whoever helps me out and may God fulfill your wish of sleeping with Elle Mcphearson (ok, thats my dream!)

NeoCode
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
You just need to set the hidden / display style attributes of the element to hide it... Visibility will not show the element, but leave a white space. Display is nicer (removes white space), but only works in later browsers.

function hideElement(ele) {
     if (ele.style) {
          ele.style.display="none";
          ele.style.visibility="hidden";
     }
}

function showElement(ele) {
     if (ele.style) {
          ele.style.display="block";
          ele.style.visibility="visible";
     }
}

function checkAndUpdate() {
     if (document.addOrder.CountryList.value == "Other") {
          // Show the text box
          showElement(document.forms.addOrder.StateOther);

          // Hide the select box
          hideElement(document.forms.addOrder.StateList);

          // To prevent statelist from being submitted wiht a value
          document.forms.addOrder.StateOther.selectedIndex = -1;
     }
     else {
          // Hide the text box
          hideElement(document.forms.addOrder.StateOther);

          // Show the select box
          showElement(document.forms.addOrder.StateList);

          // To prevent stateother from being submitted with a value
          document.forms.addOrder.StateOther.value = "";

          listStates.populate();
     }
}

Commented:
Oh and to hide the element in the first place put hideElement(document.forms.addOrder.StateOther); after it appears in the html, or just put:

<input type="text" name="StateOther" style="visibility: hidden;">

Commented:
Just because you can that doesn't means you should.
There is human interface problem by doing this.
The user has no way of getting the select boxes back. Unless s/he reloads the page that may result in loosing some of the info that is already entered.

It may be better if you only show and hide the 'Other' fields but not the select boxes.
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Commented:
Just because you can that doesn't means you should.
There is human interface problem by doing this.
The user has no way of getting the select boxes back. Unless s/he reloads the page that may result in loosing some of the info that is already entered.

It may be better if you only show and hide the 'Other' fields but not the select boxes.

Commented:
Sorry about this double entry. I did a refresh.
Maybe EE should put a unique ID in this comments that prohibits double entries.

Now back to your problem, if 'Select Box 1' always stayed up and 'Select Box 2' was hidden the user can bring can 'Select Box 2' back by selecting something other that 'Other' in 'Select Box 1'.
Top Expert 2013

Commented:
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
   In the absence of responses, I may recommend DELETE unless it is clear
   to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&

Top Expert 2013

Commented:
It is time to clean this abandoned question up.

I am putting it on a clean up list for CS.

<recommendation>
points to slyrp

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial