Hello all...
I'm fooling around with building a form that grows depending on the users input (relatively new to DOM 2 - but fun stuff!) I'm working on getting it to work (rather than being pretty - there are many improvements that could be made).
My question is has anyone seen any similar examples out there? The more I build on this thing, the more I believe there has to be another way... (like rather than creating every pull-down box - yes, I should put that into it's own function! - should I be playing with visibility and positioning?)
Anyways - here is the code - Let me know what you think (and if you have seen anything out there like this)!
Dan
<html>
<head>
<script language="javascript" type="text/javascript">
var hr = document.createElement("hr");
var firstSelect;
var secondSelect;
function changeMe(dom){
//alert(dom.value);
if (!firstSelect){
firstSelect=document.createElement("h3");
firstSelect.setAttribute("style", "color:red");
firstSelect.setAttribute("id","mf");
firstSelect.appendChild(document.createTextNode("You like "+dom.value+"? Press 'Next' to continue!"));
document.body.appendChild(firstSelect);
firstHide=document.createElement("input");
firstHide.setAttribute("type","hidden");
firstHide.setAttribute("value",dom.value);
firstHide.setAttribute("id", "firstBlank");
//firstSelect.setAttribute("onChange","changeMe(this)");
document.body.appendChild(firstHide)
document.body.appendChild(hr);
} else {
document.getElementById('mf').innerHTML= "You like "+dom.value+"? Press 'Next' to continue!";
document.getElementById('firstBlank').value=dom.value;
}
}
function changeMe2(){
var whichChose=document.getElementById('firstBlank').value;
if(whichChose=="Men"){
//alert("You like Men!");
if(!secondSelect){
secondSelect=document.createElement("select");
secondSelect.setAttribute("name","menu2");
secondOpt1=document.createElement("option");
secondOpt1.setAttribute("id","FH");
secondOpt1.setAttribute("value","FH");
secondOpt1.appendChild(document.createTextNode("Facial Hair"));
secondOpt2=document.createElement("option");
secondOpt2.setAttribute("id","NFH");
secondOpt2.setAttribute("value","NFH");
secondOpt2.appendChild(document.createTextNode("No Facial Hair"));
secondSelect.appendChild(secondOpt1);
secondSelect.appendChild(secondOpt2);
document.body.appendChild(secondSelect);
document.getElementById("buttons").style.top=parseInt(document.getElementById('buttons').style.top)+ 100+"px";
}
} else if(whichChose=="Women"){
//alert("You like Women!");
if(!secondSelect){
secondSelect=document.createElement("select");
secondSelect.setAttribute("name","menu2");
secondSelect.setAttribute("id","menu2");
secondOpt1=document.createElement("option");
secondOpt1.setAttribute("id","twoStart");
secondOpt1.setAttribute("value","HC");
secondOpt1.appendChild(document.createTextNode("Hair Color?"));
secondOpt2=document.createElement("option");
secondOpt2.setAttribute("id","bl");
secondOpt2.setAttribute("value","bl");
secondOpt2.appendChild(document.createTextNode("Blonde"));
secondOpt3=document.createElement("option");
secondOpt3.setAttribute("id","RH");
secondOpt3.setAttribute("value","RH");
secondOpt3.appendChild(document.createTextNode("Red Head"));
secondOpt4=document.createElement("option");
secondOpt4.setAttribute("id","br");
secondOpt4.setAttribute("value","br");
secondOpt4.appendChild(document.createTextNode("Brunette"));
secondSelect.appendChild(secondOpt1);
secondSelect.appendChild(secondOpt2);
secondSelect.appendChild(secondOpt3);
secondSelect.appendChild(secondOpt4);
document.body.appendChild(secondSelect);
document.getElementById('menu2').addEventListener("change",test, false);
document.getElementById("buttons").style.top=parseInt(document.getElementById('buttons').style.top)+ 83+"px";
}
} else if(whichChose=="O"){
alert("Other?!?");
}
}
function test(dom){
//alert(this.dom);
secondText=document.createElement("h3");
secondText.setAttribute("style", "color:red");
secondText.setAttribute("id","hairColor");
secondText.appendChild(document.createTextNode("You like "+dom.value+"? Press 'Next' to continue!"));
document.body.appendChild(secondText);
}
function nextQuestion(){
if(firstSelect==null){
alert("you didn't answer the first question!");
return;
} else {
changeMe2();
}
if(secondSelect==null){
} else {
//alert(document.getElementById("FH").selected)
}
}
</script>
</head>
<body>
<div id="buttons" style="position:absolute; top:8px; left:200px">
<button onclick="nextQuestion();">Next</button>
<button onclick="location.reload();document.forms[0].elements[0].options[0].selected=true;">Reset Form</button>
</div>
<form name="form1" action="">
<select name="menu1" onChange="changeMe(this)">
<option value="Make a choice damn it!" selected>Your Choice?</option>
<option value="Men">Male</option>
<option value="Women">Female</option>
<option value="O">Other...</option>
</select>
</form>
<body>
</html>
Before you post, read our: 
