Entry
How do I collect the data from a FORM element?
Apr 22nd, 2000 05:31
Martin Honnen,
The following provides a constructor function
FormData
to which you pass a form object. The function retrieves the data from
the different kind of form elements into a fields object. Note that to
account for multiple selects the data of a field differs according to
the type: it is a string for all but multiple selects and an array of
strings for multiple selects.
<HTML>
<HEAD>
<SCRIPT>
function FormData (form) {
this.toString = FormData_toString;
this.toQueryString = FormData_toQueryString;
var fields = this.fields = new Object();
for (var e = 0; e < form.elements.length; e++) {
var field = form.elements[e];
if (field.name) {
if ((field.type.toLowerCase() == 'text'
|| field.type.toLowerCase() == 'textarea'
|| field.type.toLowerCase() == 'password'
|| field.type.toLowerCase() == 'file')
&& field.value)
fields[field.name] = field.value;
else if ((field.type.toLowerCase() == 'checkbox'
|| field.type.toLowerCase() == 'radio')
&& field.checked)
fields[field.name] = field.value;
else if (field.type.toLowerCase() == 'select-one'
&& field.selectedIndex != -1)
fields[field.name] =
field.options[field.selectedIndex].value;
else if (field.type.toLowerCase() == 'select-multiple'
&& field.selectedIndex != -1) {
fields[field.name] = new Array();
for (var i = 0; i < field.options.length; i++)
if (field.options[i].selected)
fields[field.name][fields[field.name].length] =
field.options[i].value;
}
}
}
}
function FormData_toString () {
var r = '';
for (var field in this.fields)
r += field + ': ' + this.fields[field] + '\n';
return r;
}
function urlEncode (string) {
string = string.replace(/ /g, '+');
return escape(string);
}
function FormData_toQueryString () {
var r = '';
for (var field in this.fields)
if (typeof this.fields[field] != 'string')
for (var i = 0; i < this.fields[field].length; i++)
r += urlEncode(field) + '=' + urlEncode(this.fields[field][i])
+ '&';
else
r += urlEncode(field) + '=' + urlEncode(this.fields[field]) + '&';
r = r.substring(0, r.length - 1);
return r;
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: var fd = new FormData(document.formName);
alert(fd);
void 0"
>
show form data
</A>
|
<A HREF="javascript: var fd = new FormData(document.formName);
alert(fd.toQueryString());
void 0"
>
show query string
</A>
<FORM NAME="formName">
<INPUT TYPE="text" NAME="aTextField" VALUE="JavaScript.FAQTs.com">
<BR>
<TEXTAREA NAME="aTextArea" ROWS="2" COLS="20">
JavaScript.FAQTs.com
</TEXTAREA>
<BR>
<INPUT TYPE="password" NAME="aPassword" VALUE="JavaScript">
<BR>
<INPUT TYPE="file" NAME="aFileName">
<BR>
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="radio1">
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="radio2">
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="radio3">
<BR>
<INPUT TYPE="checkbox" NAME="aCheckBox" VALUE="checkbox1">
<BR>
<SELECT NAME="select1">
<OPTION VALUE="Kibology">Kibology
<OPTION VALUE="Xibology">Xibology
<OPTION VALUE="Scriptology">Scriptology
</SELECT>
<BR>
<SELECT NAME="select2" MULTIPLE>
<OPTION VALUE="Kibology">Kibology
<OPTION VALUE="Xibology">Xibology
<OPTION VALUE="Scriptology">Scriptology
</SELECT>
<BR>
<INPUT TYPE="button" NAME="aButton" VALUE="button0">
<BR>
<INPUT TYPE="submit" NAME="aSubmit" VALUE="submit0">
</FORM>
</BODY>
</HTML>
