How to dynamically generate a block of HTML code with Javascript?

Discussion in 'Javascript' started by Phper, Oct 14, 2009.

  1. Phper

    Phper Guest

    This is the HTML code:

    1.Question Title:
    <div id="question">
    <input type="text" name="question1" size="55"/>
    <br/>
    <br/>


    A.
    <input type="text" name="option11" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option12" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option13" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option14" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>
    2.Question Title:
    <input type="text" name="question2" size="55"/>
    <br/>
    <br/>
    A.
    <input type="text" name="option21" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option22" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option23" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option24" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>
    3.Question Title:
    <input type="text" name="question3" size="55"/>
    <br/>
    <br/>
    A.
    <input type="text" name="option31" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option32" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option33" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option34" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>
    4.Question Title:
    <input type="text" name="question4" size="55"/>
    <br/>
    <br/>
    A.
    <input type="text" name="option41" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option42" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option43" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option44" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>
    5.Question Title:
    <input type="text" name="question5" size="55"/>
    <br/>
    <br/>
    A.
    <input type="text" name="option51" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option52" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option53" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option54" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>

    <input type="button" value="Add another question"
    onclick="generateQuestion()"/>
    <br/>



    When the button of "Add another question" is clicked, this snippet of
    code will be needed:



    6.Question Title:
    <input type="text" name="question6" size="55"/>
    <br/>
    <br/>
    A.
    <input type="text" name="option61" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option62" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option63" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option64" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>


    If the button of "Add another question" is clicked again, this snippet
    of code is needed:

    7.Question Title:
    <input type="text" name="question7" size="55"/>
    <br/>
    <br/>
    A.
    <input type="text" name="option71" size="6"/>
    &nbsp;&nbsp;
    B.
    <input type="text" name="option72" size="6"/>
    &nbsp;&nbsp;
    C.
    <input type="text" name="option73" size="6"/>
    &nbsp;&nbsp;
    D.
    <input type="text" name="option74" size="6"/>
    &nbsp;&nbsp;
    <input type="button" name="Submit" value="Add another
    option" />
    <br/>
    <br/>


    This product is about surveys. My website needs to provide a surveyor
    a means to create a questionnaire. Since I can't predict how many
    questions will be included in a questionnaire, I provide a means with
    which a surveyor can make necessary questions at will.

    How to do it in Javascript?
     
    Phper, Oct 14, 2009
    #1
    1. Advertising

  2. Phper

    pbd22 Guest

    On Oct 13, 6:53 pm, Phper <> wrote:
    > This is the HTML code:
    >
    >     1.Question Title:
    >         <div id="question">
    >         <input type="text" name="question1" size="55"/>
    >         <br/>
    >         <br/>
    >
    >         A.
    >         <input type="text" name="option11" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option12" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option13" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option14" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >         2.Question Title:
    >         <input type="text" name="question2" size="55"/>
    >         <br/>
    >         <br/>
    >         A.
    >         <input type="text" name="option21" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option22" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option23" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option24" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >         3.Question Title:
    >         <input type="text" name="question3" size="55"/>
    >         <br/>
    >         <br/>
    >         A.
    >         <input type="text" name="option31" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option32" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option33" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option34" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >         4.Question Title:
    >         <input type="text" name="question4" size="55"/>
    >         <br/>
    >         <br/>
    >         A.
    >         <input type="text" name="option41" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option42" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option43" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option44" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >         5.Question Title:
    >         <input type="text" name="question5" size="55"/>
    >         <br/>
    >         <br/>
    >         A.
    >         <input type="text" name="option51" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option52" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option53" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option54" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >
    >      <input type="button" value="Add another question"
    > onclick="generateQuestion()"/>
    >          <br/>
    >
    > When the button of "Add another question" is clicked, this snippet of
    > code will be needed:
    >
    >       6.Question Title:
    >         <input type="text" name="question6" size="55"/>
    >         <br/>
    >         <br/>
    >         A.
    >         <input type="text" name="option61" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option62" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option63" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option64" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >
    > If the button of "Add another question" is clicked again, this snippet
    > of code is needed:
    >
    >        7.Question Title:
    >         <input type="text" name="question7" size="55"/>
    >         <br/>
    >         <br/>
    >         A.
    >         <input type="text" name="option71" size="6"/>
    >         &nbsp;&nbsp;
    >         B.
    >         <input type="text" name="option72" size="6"/>
    >         &nbsp;&nbsp;
    >         C.
    >         <input type="text" name="option73" size="6"/>
    >         &nbsp;&nbsp;
    >         D.
    >         <input type="text" name="option74" size="6"/>
    >         &nbsp;&nbsp;
    >           <input type="button" name="Submit" value="Add another
    > option" />
    >         <br/>
    >         <br/>
    >
    > This product is about surveys. My website needs to provide a surveyor
    > a means to create a questionnaire. Since I can't predict how many
    > questions will be included in a questionnaire, I provide a means with
    > which a surveyor can make necessary questions at will.
    >
    > How to do it in Javascript?


    Well, a few different possibilities.

    1) If the amount of questions have a limit, then I would suggest
    simply hiding the question-set inside a DIV with "display:none" in the
    style attribute. Give each question-set DIV an id like "id=set_1" and
    "id=set_2", etc. Then, when the user clicks you could fire something
    like onclick=UnhideQuestion() where the code
    does a loop and looks at the display tag of each div and unhides the
    first one it finds (next in the sequence) with "display:none";
    Yes?

    2) Another possibility is to do something like I have done below.
    I did it really fast without checking but the idea is there for you to
    take a look at.

    3) Finally, try googling "dynamic javascript".

    Cheers,
    Peter

    <head>
    <script type="text/javascript">
    var counter = 1;
    var letterArr = ['A','B','C','D'];
    var limit = YOUR_QUESTION_LIMIT;

    function AddQuestion(){
    if (counter == limit) {
    alert("The limit is " + counter + " inputs");
    }
    else
    {

    var div = document.createElement("DIV");

    var inputHtml = counter + ". Question Title: ";
    inputHtml += "<input type='text' name='question'" +
    counter + "size='55'/><br/><br/>";

    for (i=0; i<=3;i++)
    {
    inputHtml += letterArr + ". <input type='text'
    name='option7" + (i + 1) + "' size='6'/>&nbsp;&nbsp;";
    }

    inputHtml += "<input type='button' name='Submit' value='Add
    another option' /><br/><br/>";

    div.innerHTML = inputHtml;
    document.form.appendChild(div);

    counter++;
    }
    }
    </script>
    </head>
     
    pbd22, Oct 14, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nikhil Patel
    Replies:
    3
    Views:
    2,871
    Ken Cox [Microsoft MVP]
    Oct 7, 2004
  2. JB
    Replies:
    1
    Views:
    591
    Tim Slattery
    Jun 22, 2006
  3. morrell
    Replies:
    1
    Views:
    1,006
    roy axenov
    Oct 10, 2006
  4. Robby Bankston
    Replies:
    7
    Views:
    253
    wasntme
    Jun 17, 2005
  5. Sirisha
    Replies:
    1
    Views:
    178
Loading...

Share This Page