Identifying <select> position

@TrafficJan 17.2004

Hello…

If I have a select field in a form:

[code=php] <form name=”test”> <select name=”dropdown”> <option value=”0″>option 0</option> <option value=”1″>option 1</option> <option value=”2″>option 2</option> </select> </form> [/code]

How do I figure out what position the ‘select’ field is in…? If someone chooses ‘option 0’ I want one thing to happen… If they choose ‘option 1’ I want something else to happen…

Thank you for your help…

to post a comment

JavaScript

7 Comments(s) _↴

@PittimannJan 17.2004 — #Hi!

This will work, if the selection is changed (in the beginning, the event will only occur, if not option 0 is clicked, because it is already selected - that depends on the browser):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

<form name="test">

<select name="dropdown"onchange="alert(this.options[this.selectedIndex].value);">

<option value="0">option 0</option>

<option value="1">option 1</option>

<option value="2">option 2</option>

</select>

</form>

</body>

</html>

Cheers again - Pit

@TrafficauthorJan 17.2004 — #Actually...

I was working on the example that you posted for me earlier...

Here is the script as I have it now... It works except - when I choose 'option 0' again... it makes everything 'disabled' and I can't seem to figure out how to keep the 'select' enabled...

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html> 
 <head> 
 <title>Untitled</title> 
 <style type="text/css"> 
 <!-- 
 .disabled{ 
 color:#CCCCCC; 
 } 
 .enabled{ 
 color:#000000; 
 } 
 --> 
 </style> 
 <script language="JavaScript" type="text/javascript"> 

 <!-- 
 function enableAll(){ 
 if(document.test.dropdown.value != '0'){
 for (var i=0; i < document.forms[0].elements.length; i++){ 
 if (document.forms[0].elements[i].disabled==true){ 
 document.forms[0].elements[i].disabled=false; 
 } //end disable form fields
 } //end for loop
 for (var i=0; i < document.getElementsByTagName('span').length; i++){ 
 if (document.getElementsByTagName('span')[i].className=="disabled"){ 
 document.getElementsByTagName('span')[i].className="enabled"; 
 } //end disable text color
 } //end for loop
 }else{
 for (var i=0; i < document.forms[0].elements.length; i++){ 
 if (document.forms[0].elements[i].disabled==false){ 
 document.forms[0].elements[i].disabled=true; 
 } //end enable form fields
 } //end for loop
 document.test.dropdown.disabled==false;
 for (var i=0; i < document.getElementsByTagName('span').length; i++){ 
 if (document.getElementsByTagName('span')[i].className=="enabled"){ 
 document.getElementsByTagName('span')[i].className="disabled"; 
 } //end enable text color
 } //end for loop
 } //end if test on dropdown
 } //end function
 //--> 
 </script> 
 </head> 
 <body> 
 <form name="test"> 
 <select name="dropdown" onchange="enableAll()"> 
 <option value="0">option 0</option> 
 <option value="1">option 1</option> 
 <option value="2">option 2</option> 
 </select> 

 <span class="disabled">Hey, type something, please: </span><input type="text" name="text1" disabled><br> 
 <span class="disabled">Hey, type something, please: </span><input type="text" name="text2" disabled><br> 
 <span class="disabled">Check this: </span><input type="checkbox" name="check1" disabled><br> 
 <span class="disabled">Hey, type something more, please: </span><textarea name="textA1" disabled></textarea><br> 
 <span class="disabled">Click: </span><input type="button" value="click me" disabled> 
 </form> 
 </body> 
 </html>
 
 [/code]

@PittimannJan 17.2004 — #Hi!

Your code is responsible for that!

Can you please tell me what you want, when option 0 is selected after another one had been before?

Cheers - Pit

@TrafficauthorJan 17.2004 — #hehe...

Yes... I want:

When 'option 1' or 'option 2' is chosen to make the rest of the form 'enabled' --

And, if they choose 'option 1' or 'option 2' and then change their mind and choose 'option 0' again... I want the form to be disabled again - except for the <select> - that way if they change their mind again... they can...

Thank you again for all of your help with this... I am trying all kinds of different things and can't seem to get that little part to work...

@PittimannJan 17.2004 — #Hi!

What about that?

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <style type="text/css">
 <!--
 .disabled{
 color:#CCCCCC;
 }
 .enabled{
 color:#000000;
 }
 -->
 </style>
 <script language="JavaScript" type="text/javascript">
 <!--
 function enableAll(){
 if (document.forms[0].dropdown.selectedIndex!=0){
 for (var i=0; i < document.forms[0].elements.length; i++){
 if (document.forms[0].elements[i].disabled==true){
 document.forms[0].elements[i].disabled=false;
 }
 }
 for (var i=0; i < document.getElementsByTagName('span').length; i++){
 if (document.getElementsByTagName('span')[i].className=="disabled"){
 document.getElementsByTagName('span')[i].className="enabled";
 }
 }
 }
 else {
 for (var i=0; i < document.forms[0].elements.length; i++){
 if (document.forms[0].elements[i].disabled==false&&document.forms[0].elements[i].name!="dropdown"){
 document.forms[0].elements[i].disabled=true;
 }
 }
 for (var i=0; i < document.getElementsByTagName('span').length; i++){
 if (document.getElementsByTagName('span')[i].className=="enabled"){
 document.getElementsByTagName('span')[i].className="disabled";
 }
 }
 }
 }
 //-->
 </script>
 </head>
 <body>
 <form>
 <select name="dropdown" onchange="enableAll()">
 <option value="0">option 0</option> 
 <option value="1">option 1</option> 
 <option value="2">option 2</option> 
 </select> 
 <span class="disabled">Hey, type something, please: </span><input type="text" name="text1" disabled><br>
 <span class="disabled">Hey, type something, please: </span><input type="text" name="text2" disabled><br>
 <span class="disabled">Check this: </span><input type="checkbox" name="check1" disabled><br>
 <span class="disabled">Hey, type something more, please: </span><textarea name="textA1" disabled></textarea><br>
 <span class="disabled">Click: </span><input type="button" value="click me" disabled>
 </form>
 </body>
 </html>
 [/code]

Cheers - Pit

@TrafficauthorJan 17.2004 — #You are a lifesaver...

I should have thought of that...

Thank you again...

-- Traffic

@PittimannJan 17.2004 — #Hi!

Good luck!!! I have to hit my bed...

Cheers - Pit

Also in #JavaScript _↴

Javascript/xml gallery recomendation?Menu with center page Drag Image in Netscape 6

Success!

Help @Traffic spread the word by sharing this article on Twitter...

Tweet This

Identifying <select> position

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Identifying <select> position

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴