我有一个页面，其中列出了用户以前创建的条目，每个条目都有一个链接，每个条目将调用一个在弹出 div 中打开编辑页面的函数。
编辑页面只包含一个带有更新和重置按钮的表单，但是每当我选择重置按钮以将表单返回到其初始状态时，什么都没有发生。
在过去的几天里，我在网上看了看，试图对可能导致这种情况的原因有更多的了解，但这就像在单击“重置”按钮时调用的 javascript 函数只是忽略了 document.getElementById(form)。 reset() 命令，因为没有返回 javascript 错误。
这是 parent.cfm 上的代码示例
<script language="javascript" src="functions.js" type="text/javascript"></script>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<form action="##" method="post" name="parentForm" id="parentForm">
<input type="hidden" name="formSubmitted" id="formSubmitted" value="1" />
<tr>
<td>Label 1</td>
<td>
<select name="field1" id="field1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 2</td>
<td>
<select name="field2" id="field2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 3</td>
<td><input type="text" name="field3" id="field3" /></td>
</tr>
<tr>
<td>Label 4</td>
<td>
<select name="field4" id="field4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 5</td>
<td><textarea name="field5" id="field5" rows="10" cols="75"></textarea></td>
</tr>
<tr>
<td><input type="button" name="resetFormBtn" id="resetFormBtn" onClick="resetForm('parentForm');" value="RESET" /></td>
<td><input type="button" name="formSubmittedBtn" id="formSubmittedBtn" onClick="checkForm('parentForm');" value="ADD" /></td>
</tr>
</form>
</table>
<cfif qryRecords.RecordCount GT 0>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<cfloop query="qryRecords">
<tr>
<td>Column Name 1</td>
<td>#columnName1#</td>
</tr>
<tr>
<td>Column Name 2</td>
<td>#columnName2#</td>
</tr>
<tr>
<td>Column Name 3</td>
<td>#columnName3#</td>
</tr>
<tr>
<td>Column Name 4</td>
<td>#columnName4#</td>
</tr>
<tr>
<td>Column Name 5</td>
<td>#columnName5#</td>
</tr>
<tr>
<td colspan="2">
<button name="editRecordBtn" onClick="openPage('childPage.cfm?recordID=#qryRecords.recordID#')">EDIT RECORD</button>
</td>
<td colspan="2">
<form action="##" name="removeRecord" id="removeRecord" method="post">
<input type="hidden" name="recordID" value="#qryRecords.recordID#" />
</form>
<button name="removeRecordBtn" onClick="document.getElementById('removeRecord').submit();">REMOVE RECORD</button>
</td>
</tr>
</cfloop>
</table>
</cfif>
这是在弹出窗口中打开的 child.cfm：
<script language="javascript" src="functions.js" type="text/javascript"></script>
<cfoutput>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<form action="##" method="post" name="recordEditForm" id="recordEditForm">
<input type="hidden" name="editFormSubmitted" id="editFormSubmitted" value="1" />
<tr>
<td>Label 1</td>
<td>
<select name="field1" id="field1">
<option value="1" <cfif Form.field1 EQ Variables.field1>selected</cfif>>1</option>
<option value="2" <cfif Form.field1 EQ Variables.field1>selected</cfif>>2</option>
<option value="3" <cfif Form.field1 EQ Variables.field1>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 2</td>
<td>
<select name="field2" id="field2">
<option value="1" <cfif Form.field2 EQ Variables.field2>selected</cfif>>1</option>
<option value="2" <cfif Form.field2 EQ Variables.field2>selected</cfif>>2</option>
<option value="3" <cfif Form.field2 EQ Variables.field2>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 3</td>
<td><input type="text" name="field3" id="field3" value="#Variables.field3#" /></td>
</tr>
<tr>
<td>Label 4</td>
<td>
<select name="field4" id="field4">
<option value="1" <cfif Form.field4 EQ Variables.field4>selected</cfif>>1</option>
<option value="2" <cfif Form.field4 EQ Variables.field4>selected</cfif>>2</option>
<option value="3" <cfif Form.field4 EQ Variables.field4>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 5</td>
<td><textarea name="field5" id="field5" rows="10" cols="75">#Variables.field5#</textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="resetRecordBtn" id="resetRecordBtn" onClick="resetForm('recordEditForm');" value="RESET" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="editRecordBtn" id="editRecordBtn" onClick="checkForm('recordEditForm');" value="EDIT RECORD" />
</td>
</tr>
</form>
</table>
</cfoutput>
这是functions.js中调用的两个函数：
function resetForm(formName) {
var form = formName;
document.getElementById(form).reset();
}
function openPage(source,width) {
var source = source;
var randStr = makeRandString(10);
var hasQueryString = source.indexOf("?");
if (hasQueryString > 0) {
source = source + '&';
} else {
source = source + '?';
}
source = source + 'rid=' + randStr;
var align = 'center';
var top = 80;
if (width != undefined) {
var width = width;
} else {
var width = 805;
}
var padding = 20;
var disableColor = '#666666';
var disableOpacity = 40;
var backgroundColor = '#FFFFFF';
var borderColor = '#4b8bc8';
var borderWeight = 2;
var borderRadius = 5;
var fadeOutTime = 300;
var loadingImage = '/resources/images/layout/loading2.gif';
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
}
function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
var containerid = "innerModalPopupDiv";
var popupDiv = document.createElement('div');
var popupMessage = document.createElement('div');
var blockDiv = document.createElement('div');
popupDiv.setAttribute('id', 'outerModalPopupDiv');
popupDiv.setAttribute('class', 'outerModalPopupDiv');
popupMessage.setAttribute('id', 'innerModalPopupDiv');
popupMessage.setAttribute('class', 'innerModalPopupDiv');
blockDiv.setAttribute('id', 'blockModalPopupDiv');
blockDiv.setAttribute('class', 'blockModalPopupDiv');
blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
document.body.appendChild(popupDiv);
popupDiv.appendChild(popupMessage);
document.body.appendChild(blockDiv);
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if(ieversion>6) {
getScrollHeight(top);
}
} else {
getScrollHeight(top);
}
document.getElementById('outerModalPopupDiv').style.display='block';
document.getElementById('outerModalPopupDiv').style.width = width + 'px';
document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
document.getElementById('outerModalPopupDiv').style.background = borderColor;
document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.position = 'absolute';
document.getElementById('outerModalPopupDiv').style.zIndex = 100;
document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.background = disableColor;
document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
document.getElementById('blockModalPopupDiv').style.zIndex = 99;
document.getElementById('blockModalPopupDiv').style.position = 'fixed';
document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
if(align=="center") {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
} else if(align=="left") {
document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
} else if(align=="right") {
document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
} else {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
}
blockPage();
var page_request = false;
if (window.XMLHttpRequest) {
page_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} else {
return false;
}
page_request.onreadystatechange=function(){
if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
pageloader(page_request, containerid, loadingImage);
} else {
imageloader(url, containerid, loadingImage);
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
重置此表单的最佳方法是什么？