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>  
  

No comments:

Post a Comment