Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to dynamically generate a block of HTML code with Javascript?

Reply
Thread Tools

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

 
 
Phper
Guest
Posts: n/a
 
      10-14-2009
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?
 
Reply With Quote
 
 
 
 
pbd22
Guest
Posts: n/a
 
      10-14-2009
On Oct 13, 6:53*pm, Phper <(E-Mail Removed)> 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[i] + ". <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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Fo:Block can you check to see if a block contains any text by using the block id? morrell XML 1 10-10-2006 07:18 PM
struts question - using jsp to dynamically generate value for property attribute in <html:errors/> tag JB Java 1 06-22-2006 01:16 PM
dynamically generate script block and attach to event Nikhil Patel ASP .Net 3 10-07-2004 09:41 PM



Advertisments