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

[Phper]

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?

 

[pbd22]

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>