<select name="place" id="place" onchange="spk();">
<option></option>
<option value="1">California</option>
<option value="2">New York</option>
<option value="3">Las Vegas</option>
<option value="4">Texas</option>
<option value="5">Ohio</option>
</select>
<div id="speak"></div>
<script>
function spk(){
var b = document.getElementById("place");
var c = b.options[b.selectedIndex].value; // this shows the selected option's value
var d = b.options[b.selectedIndex].text; // this shows the selected option's text
var e = "You have selected ";
document.getElementById("speak").innerHTML = e.concat(d);
}
</script>
Being a complete non programmer, i thought it would be a good idea to help others like me who have no programming knowledge but want to develop web based applications. Additionally i wanted to be able to access all these for my own repetitive use.
Sunday, March 9, 2014
load dynamic forms based on drop down selected by user
hi,
well there are many ways of doing this. i have done it the following way:-
HTML
<div id="spc">
<select id="selectform" onChange="selfo();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form id="abc" style="display:none">
<input>
</form>
<form id="def" style="display:none">
<input><input>
</form>
<form id="ghi" style="display:none">
<input><input><input>
</form>
</div>
//javascript
<script>
function selfo()
{
var a = document.getElementById("selectform").value;
if(a == 1){
document.getElementById("abc").style.display = "block";
document.getElementById("def").style.display = "none";
document.getElementById("ghi").style.display = "none";
}
else if(a == 2){
document.getElementById("def").style.display = "block";
document.getElementById("abc").style.display = "none";
document.getElementById("ghi").style.display = "none";
}
else if(a == 3){
document.getElementById("ghi").style.display = "block";
document.getElementById("abc").style.display = "none";
document.getElementById("def").style.display = "none";
}
else if(a == 0){
document.getElementById("spc").style.display = "none";
}
}
</script>
well there are many ways of doing this. i have done it the following way:-
HTML
<div id="spc">
<select id="selectform" onChange="selfo();">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form id="abc" style="display:none">
<input>
</form>
<form id="def" style="display:none">
<input><input>
</form>
<form id="ghi" style="display:none">
<input><input><input>
</form>
</div>
//javascript
<script>
function selfo()
{
var a = document.getElementById("selectform").value;
if(a == 1){
document.getElementById("abc").style.display = "block";
document.getElementById("def").style.display = "none";
document.getElementById("ghi").style.display = "none";
}
else if(a == 2){
document.getElementById("def").style.display = "block";
document.getElementById("abc").style.display = "none";
document.getElementById("ghi").style.display = "none";
}
else if(a == 3){
document.getElementById("ghi").style.display = "block";
document.getElementById("abc").style.display = "none";
document.getElementById("def").style.display = "none";
}
else if(a == 0){
document.getElementById("spc").style.display = "none";
}
}
</script>
Subscribe to:
Posts (Atom)