Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Building 'smart' forms with DOM 2

    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>
    Dan Bogaard
    Assistant Professor
    Information Technology
    Rochester Institute of Technology

  • #2
    New to the CF scene
    Join Date
    Jan 2003
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm - no takers?

    Oh well - thanks to all that looked at it!

    If this makes it easier - here is a link to it...

    http://www.rit.edu/~dsbics/dom/Project1.html

    Dan
    Dan Bogaard
    Assistant Professor
    Information Technology
    Rochester Institute of Technology


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •