How to save select value of 2nd dropdown to MySQl table

[vishalonne]

I have 2 drop down. In 2nd drop down items are added dynamically based on 1st drop down selection.
Now I want selected value of 5th subject to store in MySQL table. I am not able to get the value of option which is selected in 2nd drop down.
How can I get that selected value as the items are dynamically added in option tag
here is the code

<script>
function SetSubject(objLanguage) {
    var objMedia = document.getElementById("5thsub");
    objMedia.options.length = 0;
        objMedia.disabled = false;

    switch (objLanguage.value) {
    case "Humanity":
        objMedia.options.add(new Option("Hindi"));
        objMedia.options.add(new Option("IP"));

        break;
    case "Commerce":
        objMedia.options.add(new Option("IP"));
        objMedia.options.add(new Option("Other"));
        break;
    case "Sci[PCM]":
        objMedia.options.add(new Option("CS"));
        objMedia.options.add(new Option("IP"));
        break;
    case "Sci[PCB]":
        objMedia.options.add(new Option("IP"));
        objMedia.options.add(new Option("Math"));
        break;
    default:
        objMedia.options.add(new Option("select"));
        objMedia.disabled = true;
        break;
    }
}
</script>
<tr>
    <td>Stream : &nbsp;&nbsp;&nbsp;&nbsp;
        <select name="stream" id="stream" onchange="SetSubject(this)">
           <option> Select</option>
           <option value="Humanity">Humanity</option>
           <option value="Commerce">Commerce</option>
           <option value="Sci[PCM]">Sci[PCM]</option>
           <option value="Sci[PCB]">Sci[PCB]</option>
        </select>
    </td>
    <td>5th Subjects :       
        <select name="5thsub" id="5thsub" disabled="disabled">
            <option>Select</option>
        </select>
    </td>
</tr>

Thank you in advance to all experts

[hericles]

What language are you using for the backend? PHP, java, C# or vb.net, something else? All you have here is HTML and javascript. Its pretty hard for us to give advice when we don't even know what language you intend on using...

[DJBirdi]

You can create another function that captures the value of the "5thsub" and then call that function in two different places. One right inside your SetSubject function to capture the value as soon as the field becomes active and the other with an onchange tag in the select statement to capture any changes.

In this example, I've created a placeholder for the value of the "5thsub":

<script>
    function SetSubject(objLanguage) {
        var objMedia = document.getElementById("5thsub");
        objMedia.options.length = 0;
        objMedia.disabled = false;

        switch (objLanguage.value) {
            case "Humanity":
                objMedia.options.add(new Option("Hindi"));
                objMedia.options.add(new Option("IP"));

                break;
            case "Commerce":
                objMedia.options.add(new Option("IP"));
                objMedia.options.add(new Option("Other"));
                break;
            case "Sci[PCM]":
                objMedia.options.add(new Option("CS"));
                objMedia.options.add(new Option("IP"));
                break;
            case "Sci[PCB]":
                objMedia.options.add(new Option("IP"));
                objMedia.options.add(new Option("Math"));
                break;
            default:
                objMedia.options.add(new Option("select"));
                objMedia.disabled = true;
                break;
        }

        /*
            CALL THE NEWLY CREATED FUNCTION HERE SO IT
            CAPTURES THE 5TH SUBJECT VALUE AS SOON AS
            THAT FIELD BECOMES ACTIVE, WHICH IT OBVIOUSLY
            ONLY DOES ONCE ANY VALID VALUE IN THE FIRST DROP DOWN
            IS SELECTED
        */

        Get5thsubValue();
    }

    /*
        FUNCTION TO CAPTURE 5TH SUBJECT VALUES
        AND PLACE THEM IN A TEMPORARY PLACEHOLDER
    */

    function Get5thsubValue() {
        var objMedia = document.getElementById("5thsub");
        var placeholder = document.getElementById("placeholder");

        placeholder.innerHTML = objMedia.value;
    }
</script>

    <tr>
        <td>Stream : &nbsp;&nbsp;&nbsp;&nbsp;
            <select name="stream" id="stream" onchange="SetSubject(this)">
                <option>Select</option>
                <option value="Humanity">Humanity</option>
                <option value="Commerce">Commerce</option>
                <option value="Sci[PCM]">Sci[PCM]</option>
                <option value="Sci[PCB]">Sci[PCB]</option>
            </select>
        </td>
        <td>5th Subjects :
            <select name="5thsub" id="5thsub" disabled="disabled" onchange="Get5thsubValue()">
                <option>Select</option>
            </select>
        </td>
    </tr>

    <!-- TEMPORARY PLACEHOLDER TO HOLD 5TH SUBJECT VALUE -->

    <tr>
        <td>5th subject: <span id="placeholder"></span></td>
    </tr>