form select object dynamically changing class name with php and javascript?

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

why are you putting this in the post event? you can just render this as standard javascript as part of the page.

Answer 2

On post , the page will be refreshing , ad on reloading you are not saving the selected value of the select box.

The select box is not keep selected after posting. You have to do that.

>Other

As the value of option change the display hide also gone. Fix that

If no need to submit the page . use this

http://api.jquery.com/val/

check demo of select

Answer 3

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/