Entry
How do I dynamically add elements to a FORM?
How do I dynamically add elements to a FORM?
How do I dynamically add elements to a FORM?
Mar 18th, 2000 05:14
Martin Honnen,
DOM level 1 supported by NN6 and IE5 allows to dynamically create form
elements and add them to a FORM.
The following page contains one function
addField
which allows to add a field passing the form, the field type, the field
name and the field value and a second function
removeField
which allows to remove a field passing a form and a field name.
Two example forms are given, one that allows addition of different
types of fields, the second binding hidden field addition and removal
to some checkbox and radio button click events.
<HTML>
<HEAD>
<STYLE>
.javascript { color: white; background-color: orange; }
</STYLE>
<SCRIPT>
function addField (form, fieldType, fieldName, fieldValue) {
if (document.getElementById) {
var input = document.createElement('INPUT');
if (document.all) { // what follows should work
// with NN6 but doesn't in M14
input.type = fieldType;
input.name = fieldName;
input.value = fieldValue;
}
else if (document.getElementById) { // so here is the
// NN6 workaround
input.setAttribute('type', fieldType);
input.setAttribute('name', fieldName);
input.setAttribute('value', fieldValue);
}
form.appendChild(input);
}
}
function getField (form, fieldName) {
if (!document.all)
return form[fieldName];
else // IE has a bug not adding dynamically created field
// as named properties so we loop through the elements array
for (var e = 0; e < form.elements.length; e++)
if (form.elements[e].name == fieldName)
return form.elements[e];
return null;
}
function removeField (form, fieldName) {
var field = getField (form, fieldName);
if (field && !field.length)
field.parentNode.removeChild(field);
}
function toggleField (form, fieldName, value) {
var field = getField (form, fieldName);
if (field)
removeField (form, fieldName);
else
addField (form, 'hidden', fieldName, value);
}
</SCRIPT>
<SCRIPT>
var i = 0;
</SCRIPT>
</HEAD>
<BODY>
<H2 CLASS="javascript">Testing dynamic form field addition</H2>
<FORM NAME="formName">
type:
<SELECT NAME="fieldType">
<OPTION SELECTED VALUE="hidden">hidden
<OPTION VALUE="text">text
<OPTION VALUE="radio">radio
<OPTION VALUE="checkbox">checkbox
<OPTION VALUE="button">button
<OPTION VALUE="submit">submit
</SELECT>
name:
<INPUT TYPE="text" NAME="fieldName" VALUE="field0" SIZE="10">
<INPUT TYPE="button" VALUE="add field"
ONCLICK="var type = this.form.fieldType.value;
if (getField(this.form, this.form.fieldName.value))
this.form.fieldName.value = 'field' + ++i;
addField(this.form, type, this.form.fieldName.value,
i);"
>
<INPUT TYPE="button" VALUE="show field type"
ONCLICK="alert(getField(this.form,
this.form.fieldName.value).type);"
>
<INPUT TYPE="button" VALUE="show field value"
ONCLICK="alert(getField(this.form,
this.form.fieldName.value).value);"
>
<BR>
</FORM>
<HR>
<H2 CLASS="javascript">Addition and removal of hidden form fields</H2>
<FORM NAME="formName"
ACTION="jsInterpreter.html"
>
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="Kibology"
ONCLICK="toggleField(this.form, 'aHiddenField', this.value);"
>
<BR>
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Kibo"
ONCLICK="if (!getField(this.form, 'radio1'))
addField(this.form, 'hidden', 'radio1', this.value);
removeField(this.form, 'radio2');"
>
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Maho"
ONCLICK="if (!getField(this.form, 'radio2'))
addField(this.form, 'hidden', 'radio2', this.value);
removeField(this.form, 'radio1');"
>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>
NN4 will not allow dynamic addition or removal of form fields unless
you keep the whole form as a js data structure which you dynamically
write to a layer.
IE4 allows the insertion of unparsed html but is rather weak in
removing elements. I might add an IE4 example later.
