Entry
I have my form elements organized in table rows. How can I reset the elements in a particular row?
Mar 15th, 2001 06:09
Martin Honnen,
NN6 and IE4+ allow that:
<HTML>
<HEAD>
<SCRIPT>
function resetFormElement (element) {
switch (element.type.toLowerCase()) {
case 'text':
case 'password':
case 'textarea':
element.value = element.defaultValue;
break;
case 'radio':
case 'checkbox':
element.checked = element.defaultChecked;
break;
case 'select-one':
case 'select-multiple':
for (var i = 0; i < element.options.length; i++)
element.options[i].selected =
element.options[i].defaultSelected;
break;
}
}
function resetRow (tableID, rowIndex) {
if (document.all) {
var table = document.all[tableID];
var row = table.rows[rowIndex];
var inputs = row.all.tags('INPUT');
for (var i = 0; i < inputs.length; i++)
resetFormElement(inputs[i]);
var selects = row.all.tags('SELECT');
for (var i = 0; i < selects.length; i++)
resetFormElement(selects[i]);
var textareas = row.all.tags('TEXTAREA');
for (var i = 0; i < textareas.length; i++)
resetFormElement(textareas[i]);
}
else if (document.getElementById) {
var table = document.getElementById(tableID);
var row = table.rows[rowIndex];
var inputs = row.getElementsByTagName('INPUT');
for (var i = 0; i < inputs.length; i++)
resetFormElement(inputs[i]);
var selects = row.getElementsByTagName('SELECT');
for (var i = 0; i < selects.length; i++)
resetFormElement(selects[i]);
var textareas = row.getElementsByTagName('TEXTAREA');
for (var i = 0; i < textareas.length; i++)
resetFormElement(textareas[i]);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
row index:
<INPUT TYPE="text" NAME="row" VALUE="0" SIZE="3">
<INPUT TYPE="button" VALUE="reset row"
ONCLICK="resetRow('aTable', this.form.row.value)"
>
<TABLE ID="aTable" BORDER="1">
<TR>
<TD>
0
</TD>
<TD>
<INPUT TYPE="text" NAME="field0">
</TD>
<TD>
<INPUT TYPE="radio" NAME="field1" VALUE="radio0">
<INPUT TYPE="radio" NAME="field1" VALUE="radio1">
</TD>
</TR>
<TR>
<TD>
1
</TD>
<TD>
<INPUT TYPE="text" NAME="field2" VALUE="Kibology">
</TD>
<TD>
<INPUT TYPE="radio" NAME="field3" VALUE="radio0">
<INPUT TYPE="radio" NAME="field3" VALUE="radio1" CHECKED>
</TD>
</TR>
<TR>
<TD>
2
</TD>
<TD>
<SELECT NAME="field4">
<OPTION SELECTED>Kibo
<OPTION>Maho
<OPTION>Xibo
</SELECT>
</TD>
<TD>
<SELECT NAME="field5" SIZE="3" MULTIPLE>
<OPTION SELECTED>Kibo
<OPTION>Maho
<OPTION SELECTED>Xibo
</SELECT>
</TD>
</TR>
<TR>
<TD>
3
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="field6" CHECKED VALUE="Kibology">
</TD>
<TD>
<INPUT TYPE="password" NAME="field7">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
