CODEWITHSUNDEEP
javascripthtmlfunction
Vishwanth Iron Heart
Vishwanth Iron Heart

Reputation: 734

Onchange events for multiple textboxes

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

Upvotes: 4

Views: 1372

Answers (2)

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

Reputation: 4216

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";
}

Upvotes: 3

Nitin Dhomse
Nitin Dhomse

Reputation: 2622

use onchange event for multiple select as follows. 1.give same class name for all select as below.

<select id="stats" class='select-box">
<select id="expo" class='select-box">

2.use jquery onchange function

$( ".select-box" ).change(function() {
      alert( "option selected" );
   });

Upvotes: 0

Related Questions