Onchange events for multiple textboxes

- 1 answer

Ad

here's my javascript

function disp(s)
    {
        var st=document.getElementById("stats");
        st=st.options[st.selectedIndex].text;
        document.getElementById("sp").innerHTML="this is changing :"+s;
        if(st=="Other")
        {
            document.getElementById(s).style.display="inline";
        }
        else
            document.getElementById(s).style.display="none";
    }

and here's my front end

Rain Guage Status
            <select id="stats" onchange="disp('oth')"><option>
                Good
                    </option>
                    <option>
                        Bad
                    </option>
                    <option>
                        Other
                    </option></select>
                    <input type="text" placeholder="Please enter the status briefly" style="display:none" id="oth">
Exposure
            </td>
            <td><select id="expo" onchange="disp('othe')"><option>
                Good
                    </option>
                    <option>
                        Bad
                    </option>
                    <option>
                        Other
                    </option></select>
                    <input type="text" placeholder="Please enter the exposure briefly" style="display:none" id="othe">

the problem i'm facing is that exposure texbox opens up only when rainguage textbox is displayed... there's no relation to both of dropdowns except for the function which takes the id of textbox to display. like if rainguage tb is displayed and exposure tb is displayed, i cannot hide exposure tb unless i hide rainguage tb. please help

Ad

Answer

Ad

It's because you are getting the element by id stats. Instead you can pass the element with your function.

<select id="stats" onchange="disp(this, 'oth')">
<select id="expo" onchange="disp(this, 'othe')">

and Update your function like this :

function disp(ele,s)
{
    //var st=document.getElementById("stats"); No need for this line
    var st=ele.options[ele.selectedIndex].text; //use ele from here
    document.getElementById("sp").innerHTML="this is changing :"+s;
    if(st=="Other")
    {
        document.getElementById(s).style.display="inline";
    }
    else
        document.getElementById(s).style.display="none";
}
Ad
source: stackoverflow.com
Ad