i have 3 text fields, want show first , hide second , third when option 1 selected, , opposite when option 2 selected.
i did following:
<script language="javascript"> function hola(x) { if(x == 1) { document.getelementbyid("div1").style.visibility="visible"; document.getelementbyid("div2").style.visibility="hidden"; } if(x == 2) { document.getelementbyid("div1").style.visibility="hidden"; document.getelementbyid("div2").style.visibility="visible"; } } </script> <body onload='hola(1)'> <label class="field6" for="shower_times">how many showers each takes per day: </label> <select name="shower_times" onchange="hola(this.value)"> <option value="1">1</option> <option value="2">2</option> </select> <div id="div1"> <br> <label class="field6" for="hour"> hour of shower: </label><input type="text" name="hour" class="input"> </div> <div id="div2"> <label class="field6" for="hour1">hour of first shower: </label><input type="text" name="hour1" class="input"> <br> <label class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> </div> it's working find when change option, problem @ beginning want show first field, that's why used
<body onload='hola(1)'> but it's not working, it's showing 3 @ beginning.
the code seems work alone, when add other codes 1 http://jsfiddle.net/3yzbm/1/ , part not working way mentioned
if choose go pure js, this...
the html (slightly modified)...
<label class="field6" for="shower_times">how many showers each takes per day: </label> <select name="shower_times" id="mselect" onchange="hola();"> <option value="1">1</option> <option value="2">2</option> </select> <div id="div1"> <br> <label class="field6" for="hour"> hour of shower: </label><input type="text" name="hour" class="input"> </div> <div id="div2"> <label class="field6" for="hour1">hour of first shower: </label><input type="text" name="hour1" class="input"> <br> <label class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> </div> </div> the css (optional hide 2 fields default since 1 selected default)...
#div2 { display:none; } and js modified maggie...
function hola() { var mselect = document.getelementbyid("mselect"); var mselectvalue = mselect.options[mselect.selectedindex].value; var mdivone = document.getelementbyid("div1"); var mdivtwo = document.getelementbyid("div2"); if (mselectvalue == 2) { mdivtwo.style.display = "block"; mdivone.style.display = "none"; } else { mdivtwo.style.display = "none"; mdivone.style.display = "block"; } } and maggie's modified solution to back up!
Comments
Post a Comment