Question

Having some trouble here with this.

The setup:

A select object with a choice of “Other”

User selects “Other”.

Script runs when this specific value is chosen, and dynamically changes the class of input object from “hide” to “show” (hidden and visible with css display).

<p>Select a Grade:</p>
    <select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
    <option value="No Specified Grade">Please Select</option>
    <option value="201">201</option>
        ...
    <option value="Secondary">Secondary</option>
    <option value="otherGrade">Other</option>
    </select>

<p>If "Other":</p>
<?php
    $otherGrade = $_POST['grade'];

    if($otherGrade = "otherGrade")
    {
    echo("<script language='javascript' type='text/javascript'>

        function changeCssClass(objInputID)
        {               

                    if(document.getElementById(objInputID).className=='hide')
            {
                        document.getElementById(objInputID).className = 'show';
            }
            else
            {
                document.getElementById(objInputID).className = 'hide';
            }
        }

        </script>");
    }
    else
    {
        echo ("");
    }
?>

<input type="text" name="otherGrade" id="otherGrade" class="hide" />

Should I remove the onchange event from the select object? If so, I am at a loss as how to have the script executed.

Any solutions would be greatly appreciated.

Answer 1

The script should always be included in your page, since you want this to run while you make the changes in the dropdown list..

<script language='javascript' type='text/javascript'>
    function changeCssClass(objInputID, currentVal, correctVal)
    {         
       if(correctVal == currentVal)
        {
                    document.getElementById(objInputID).className = 'show';
        }
        else
        {
            document.getElementById(objInputID).className = 'hide';
        }
    }
</script>

<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
    ...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>

<p>If "Other":</p>

<input type="text" name="otherGrade" id="otherGrade" class="hide" />

Live example at : http://www.jsfiddle.net/MVymF/