CODEWITHSUNDEEP
javascript
user788448
user788448

Reputation: 797

Javascript dropdown selected value doesn't work in IE

I have a javascript switch case statement to redirect the page or show/hide a text box depends on what user selects from the dropdown box value. It works fine in firefox but not IE. The error message is as below: SCRIPT5007: Unable to get value of the property 'value': object is null or undefined _index.htm, line 67 character 7

switch (document.form.description.options[description.selectedIndex].value) - IE is having a hard time with form.desciprition. 

<script language="javascript">
 function fundsource()
   {
       var val;


       for (i=0; i< document.form.description.length; i++)
       {

            switch (document.form.description.options[description.selectedIndex].value)

            {
                case "Select":
                    document.form.scholarship.style.visibility='hidden';
                    document.form.description_other.style.visibility='hidden';
                    break;
                case "Wall of Friends":
                    location.href= some url
                    break;
                case "Scholarship":
                    document.form.scholarship.style.visibility='visible';


                    break;
                case "Other":
                    document.form.description_other.style.visibility='visible';
                    document.getElementById("descriptionspan").style.visibility="visible";
                    break;


            }
       }
   }
</script>

html code as below:

<tr>
                    <td align="right">Description of the Fund for Your Donation <br /></td>
                    <td>

        <select name="description" id="description" onchange="fundsource()">
                        <option>Select</option>
                        <option>Scholarship</option>
                        <option>Rainbow of Life</option>
                        <option>Wall of Friends</option>
                        <option>General</option>
                        <option>Other</option>

                    </select>
                    <select name="scholarship" id="scholarship" style="visibility:hidden;">
                        <option>Alumni Scholarship</option>
                        <option>Other</option>
                    </select>
                    </td>
                  </tr>
                   <tr>
                    <td align="right" valign="top"><div id="descriptionspan" alt="description" style="visibility:hidden;">Other, please specify:</div></td>
                    <td><input type="text" name="description_other" size="50" alt="Fund Other" style="visibility:hidden;" /></td>
                  </tr>

I changed the document.form.description.options[description.selectedIndex].value to document.form.description.options[description.selectedIndex].text, it still doesn't work. Please advise. TIA.

Upvotes: 0

Views: 1795

Answers (3)

5z- -
5z- -

Reputation: 161

as i know,ie is freak,you should type more words to let it know

1.change your js code:

switch (document.form.description.options[description.selectedIndex].value)

to

switch (document.form.description.options[document.form.description.selectedIndex].value)

2.change your html code

<option>Select</option>
<option>Scholarship</option>
<option>Rainbow of Life</option>
<option>Wall of Friends</option>
<option>General</option>
<option>Other</option>

to

<option value="Select">Select</option>
<option value="Scholarship">Scholarship</option>
<option value="Rainbow of Life">Rainbow of Life</option>
<option value="Wall of Friends">Wall of Friends</option>
<option value="General">General</option>
<option value="Other">Other</option>

if you don't want add attribute value,you should change your js .value to .innerText

Upvotes: 0

Muhammad Bekette
Muhammad Bekette

Reputation: 1434

you should do something like this

    function fundsource()
       {
           var val;
           var form=document.getElementByID("formID");
           var description=getElementByID("description");

//why for loop?
           //for (i=0; i< description.options.length; i++)
           //{

                switch (description.value)

                {
                    case "Select":
                        //get option and change it's attr
                        break;
                    case "Wall of Friends":
                        //get option and change it's attr
                        break;
                    case "Scholarship":
                        //get option and change it's attr

                        break;
                    case "Other":
                        //get option and change it's attr
                        break;


                }
           //}
       }

Upvotes: 0

Michael Sanchez
Michael Sanchez

Reputation: 1265

If you plan to use 

document.getElementById("description").value

in your switch case, you must add a "value" attribute to your option tags like

<option value="Scholarship">Scholarship</option>

This code doesn't have to be in a for loop too, you can just do

function fundsource() {
   var val = document.getElementById("description").value;
        switch (val) {
            case "Select":
                document.form.scholarship.style.visibility='hidden';
                document.form.description_other.style.visibility='hidden';
                break;
            case "Wall of Friends":
                location.href= some url
                break;
            case "Scholarship":
                document.form.scholarship.style.visibility='visible';
                break;
            case "Other":
                document.form.description_other.style.visibility='visible';
                document.getElementById("descriptionspan").style.visibility="visible";
                break;
        }
 }

Hope this helps.

Upvotes: 1

Related Questions