This is my script
<script type="text/javascript">
function showlevel1() {
var l1 = document.getElementById('default');
l1.style.display = 'block';
var l2 = document.getElementById('secondDiv');
l2.style.display = 'none';
}
function showlevel2() {
var l2 = document.getElementById('secondDiv');
l2.style.display = 'block';
var l1 = document.getElementById('default');
l1.style.display = 'none';
}
function selectHandler(select) {
if (select.value == 'count') {
showlevel2();
} else if (select.value == 'Top') {
showlevel1();
}
}
</script>
HTML:
<form>
<select id='type'>
<option value="Top">TOP</option>
<option value="count">COUNT</option>
</select>
<input type='submit' value='submit' onclick=selectHandler(this)>
</form>
<div id='default' style="display:block">
<h1>Div 1</h2>
</div>
<div id='secondDiv' style="display:none">
<h2> Div 2</h1>
</div>
When I load the page the DIV 1 does shows up, since the property is set to display:'Block' but when I perform the selection from drop down it never changes to DIV2 upon the Count selection from drop down and a submit click button?
Can anyone please help in figuring out the issue and let me know what am I doing wrong?
Thanks
Your select.value outputs submit since your this element referes to
-> <input type="submit" value="submit"/>
Why
selectHandler(this) is triggered by your submit button and not by your <select> tag, so when you perform select.value it returns submit as your text.
After seeing your question I guess you are in need of getting the select tag value.
Try this
function selectHandler(select) {
// get your drop down list element i.e select tag
var selected = document.getElementById('type');
if (selected.value === 'Count') {
showlevel2();
}
else if (selected.value === 'Top') {
showlevel1();
}
}
After seeing your comments
The problem is your using type="submit" which posts to the same page when your click on it. Change it to type="button"
<input type='button' value='submit' onclick="selectHandler()">
function selectHandler() {
// get your drop down list element i.e select tag
var select = document.getElementById('type');
if (select.value === 'Count') {
showlevel2();
}
else if (select.value === 'Top') {
showlevel1();
}
}
Or
<input type='submit' value='submit' onclick="return selectHandler()">
function selectHandler() {
var select = document.getElementById('type');
if (select.value === 'Count')
showlevel2();
else if (select.value === 'Top')
showlevel1();
return false;
}
js fiddle here http://jsfiddle.net/QGsza/68/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments