View Full Version : creating form fields dynamically using javascript

12-24-2006, 04:56 PM
id like to produce a code generator page for creating iframe codes.

the top of the page will be the form followed by the resulting iframe code, followed by the actual iframe result.

The form will start with one select field, then when the user makes a selection, the next selection box appears beneath the first. the second selection box has options depending on the selection of the previous selection box. The iframe code is updated, and the iframe preview reloads using the new code.

As each selection is made another selection appears until all selections are complete.

Can somebody plz help, if not with some codes, then links to code or appropriate tutorials. I absolutey suck with with javascript and have no clue with things like this.document.that.element.id.here.i.suc

so please help :)

edit: something like this chained select, which also edits the iframe code and iframe preview.

im sure able to set up the form using that download, its just how to get it to update the <textarea>iframe code</textarea> and the <iframe><iframe>

12-25-2006, 12:03 AM
/* This script uses a mulit-dimensional array to keep track of the select elements
and their various values/options. The first variable in the array represents
the value the user selected.

First value: ['Format text',

The second value is an array containing a title for the new select element and the
new options for that select element.

Second value: ['Select style:','bold','underline','bold and underline']],

The first variable in each array must be a unique value. You'll notice that I
used 'one checkbox' instead of simply using the value 'one'. Otherwise you may end
up with conflicts if there are multiple select elements that use the same values.
To create a new select element simply add a new array to the choices array.

New element: ['Format text',['Select style:','bold','underline','bold and underline']],

To create the source code after the user selects a certain option just add a new array
that contains the value the user selected and the source code to display.

Source code: ['blue','<html><body bgcolor=\"blue\"></body></html>'],

var choices = [['Set background color',['Choose the color:','black','blue','red']],
['Create a form',['Select input type:','text','button','checkbox']],
['Format text',['Select style:','bold','underline','bold and underline']],
['text',['How many:','one textbox','two textboxes','three textboxes']],
['button',['How many:','one button','two buttons','three buttons']],
['checkbox',['How many:','one checkbox','two checkboxes','three checkboxes']],
['one textbox','<form><input type=\"textbox\" name=\"text1\"></form>'],
['two textboxes','<form><input type=\"textbox\" name=\"text1\"><br><input type=\"textbox\" name=\"text2\"></form>'],
['three textboxes','<form><input type=\"textbox\" name=\"text1\"><br><input type=\"textbox\" name=\"text2\"><br><input type=\"textbox\" name=\"text3\"></form>'],
['one checkbox','<form><input type=\"checkbox\" name=\"check1\"></form>'],
['two checkboxes','<form><input type=\"checkbox\" name=\"check1\"><br><input type=\"checkbox\" name=\"check2\"></form>'],
['three checkboxes','<form><input type=\"checkbox\" name=\"check1\"><br><input type=\"checkbox\" name=\"check2\"><br><input type=\"checkbox\" name=\"check3\"></form>'],
['one button','<form><input type=\"button\" value=\"Button1\"></form>'],
['two buttons','<form><input type=\"button\" value=\"Button1\"><br><input type=\"button\" value=\"Button2\"></form>'],
['three buttons','<form><input type=\"button\" value=\"Button1\"><br><input type=\"button\" value=\"Button2\"><br><input type=\"button\" value=\"Button3\"></form>'],
['black','<html><body bgcolor=\"black\"></body></html>'],
['blue','<html><body bgcolor=\"blue\"></body></html>'],
['red','<html><body bgcolor=\"red\"></body></html>'],
['bold','<b>This text is bold</b>'],
['underline','<u>This text is underlined.</u>'],
['bold and underline','<b>This text is bold</b><br><u>This text is underlined.</u>']];

function createSelect(choices) {
if (!choices || choices.length==0) return false;

var option;
var select = document.createElement('select');
for (var i=0; i<choices.length; ++i) {
option = document.createElement('option');
option.setAttribute('value',(i==0) ? '' : choices[i]);
option.innerHTML = choices[i];
return select;

function showNextSelect(a) {
if (!a) return false;

var select,code;
for (var i=0; i<choices.length; ++i) {
if (a==choices[i][0]) {
if (typeof(choices[i][1])=='string') {
code = choices[i][1];
} else {
select = createSelect(choices[i][1]);

if (select) {
var selects = document.getElementsByTagName('select');
for (var j=0; j<selects.length; ++j) {
var form = document.getElementById('form1');
var br = document.createElement('br');
return false;

if (code) {
document.getElementById('code').value = code;

return false;

function resetPage() {
<form id="form1">
<select id="one" name="one" onchange="showNextSelect(this.value);">
<option value="">Select one of the following:</option>
<option value="Set background color">Set background color</option>
<option value="Create a form">Create a form</option>
<option value="Format text">Format text</option>
</select> &nbsp; &nbsp;
<input type="button" value="Reset" onclick="resetPage();">
<form id="form2">
<b>Source Code</b><br>
<textarea id="code" cols="50" rows="10"></textarea>
<iframe src="" id="preview" width="500" height="200"></iframe>

12-25-2006, 09:54 AM
that is spot on.

exactly what i asked for, fulfils the job perfectly first time.

when i have the page setup ill post a link. ty.
expect some mention on my site, either on the page or on a thank you page.

any idea how i can create the selects using PHP and a template system?
this works:

<form id="form1">
<select id="one" name="one" onchange="showNextSelect(this.value);">
<option value="">Select one of the following:</option>
<!-- BEGIN id_select -->
<option value="{id_select.ID}">{id_select.ID_SELECT}</option>
<!-- END id_select -->
<option value="ID1">ID1</option>

but it doesnt work inside the javascript.

var choices =

<!-- BEGIN option2 -->
<!-- END option2 --->
['ID1',['Choose the color:','black','blue','red']],

any idea how i can do this?

12-25-2006, 05:26 PM
The comment marks for html and javascript are slightly different. In javascript you need to use two forward slashes before a comment.

// BEGIN option2
// END option2
['ID1',['Choose the color:','black','blue','red']],

Or you can use a forward slash and a asterisk at the beginning and end of each comment.

/* BEGIN option2 */
/* END option2 */
['ID1',['Choose the color:','black','blue','red']],

03-17-2007, 04:10 PM
Hi all,

I'm trying to do something similar to this in a site I'm building.

j9ine's code above works fine in Firefox, but I can't get it to work properly in IE7: the first select works OK and you get the second select up, but then the second select doesn't work (the code isn't displayed for the background colour or text formatting selections, and the "how many" select box doesn't appear for the create a form option).

Anyone know how to fix it for IE7? I can't see where the problem is.

Thanks in advance!