www.webdeveloper.com
Results 1 to 2 of 2

Thread: Having a hard time with dynamic web form.

  1. #1
    Join Date
    Jun 2011
    Posts
    2

    Having a hard time with dynamic web form.

    Hi everyone,

    I've been trying to build a dynamic webform for the past week, but I'm pretty sure I'm not doing it the right way and I'm not able to get a final working result. First of all, I'll post this image here which represent exactly what I'm trying to do (found it in an unanswered question on stack overflow) : http://i.stack.imgur.com/xafwE.png

    So yeah, I'm building a webform that will allow users to ask for new databases to be created on different server. Upon landing on the page, the client is asked to fill some fields (as DB name, etc, see Quiz 1 + Question 1 for reference). At one point, the client must fill in the DB's user information (name, rights, etc. See possible answer 1), but I would like him to also have the possibility the add another user wich would create new inputs for the new user (see Question 1 + possible answer 2). The client could do that for, let's say a maximum of 5 users.

    Also, if he feels like it, the client can also click on a button at the end of the form to add a whole new database request ''form'' on the same page (see Question 2).

    I'm able to do my form fine if it is static. I'm pretty sure I could manage to build a form if the only dynamic option was to add other users. But I'm mind-blown when I arrive to the point that I have to add other databases that includes users too.

    At this point, all I was doing was using the document.getElementById().innerHTML += ... I was hardcoding name fields and doing ugly hacks, and I don't like that.

    So I'm coming here, to ask for hints on how I could manage the different requests and users. Maybe someone has a link that I have not found that would show a little exemple on how to manage that. Also, you must know I'm pretty new to javascript. I'm starting using the addChild() and other similars methods too to make my code a bit more good looking.

    I can provide any code you want!

  2. #2
    Join Date
    Nov 2010
    Posts
    1,097
    this seems to be something like it...

    Code:
    <body>
    <form name="myform">
    Question 1
    <input type="text" onfocus="checkVal(this,'enter your question here')" value="enter your question here"/>
    <div id="ans1">
    Possible Answers
    <input type="text" onfocus="checkVal(this,'enter possible answer')" value="enter possible answer 1"/>
    </div>
    <input type="button" value ="add answer" onclick="addAns('ans1')"/>
    </form>
    <input type="button" value ="add question" onclick="addQues()"/>
    
    <script type="text/javascript">
    function addAns(theid,btn){
    var thediv=document.getElementById(theid);
    var inp=document.createElement("input");
    inp.type="text";
    var kids=thediv.children.length;
    var num=btn?(kids-2)/2:(kids+3)/2
    inp.value="enter possible answer "+num;
    inp.onfocus=function (){checkVal(this,'enter possible answer')}
    if(btn){
    thediv.insertBefore(inp,btn);
    thediv.insertBefore(document.createElement("br"),btn);
    } else {
    thediv.appendChild(document.createElement("br"));
    thediv.appendChild(inp);
    	}
    }
    
    function addQues(){
    var frm=document.myform 
    var qcount=frm.children.length-1
    var qdiv=document.createElement("div");
    qdiv.id="quesdiv"+qcount;
    qdiv.appendChild(document.createTextNode("Question "+qcount)); 
    qdiv.appendChild(document.createElement("br")); 
    var inp=document.createElement("input");
    inp.type="text"
    inp.value="enter your question here";
    inp.onfocus=function (){checkVal(this,"enter your question here")};
    qdiv.appendChild(inp);
    qdiv.appendChild(document.createElement("br")); 
    var ainp=document.createElement("input");
    ainp.type="text"
    ainp.value='enter possible answer 1';
    ainp.onfocus=function (){checkVal(this,'enter possible answer')};
    qdiv.appendChild(ainp);
    qdiv.appendChild(document.createElement("br")); 
    var butt=document.createElement("input");
    butt.type="button";
    butt.onclick=function (){addAns(qdiv.id,this)}
    butt.value="add answer"
    qdiv.appendChild(butt);
    frm.appendChild(qdiv);
    }
    
    function checkVal(inp,str){
    if(inp.value.match(str)){
    inp.value="";
    	}
    }
    </script>
    </body>
    Last edited by xelawho; 09-14-2012 at 09:08 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles