Javascript 在弹出div中重置表单

我有一个页面，其中列出了用户以前输入的条目，每个条目都有一个链接，该链接将调用一个函数，该函数在弹出式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>

---

重置此表单的最佳方法是什么？

此方法取决于您是要使用将重置事件附加到表单，还是要使用单击将重置事件附加到实际按钮

单击重置按钮可触发

元素的

onreset

事件。在HTML中，

onreset

事件附加到

元素：

<form id="form1" onreset="yourResetFunction()">
    <input type="reset" value="Reset">

---

这里还提出了一个类似的问题：

尝试获取表单并执行.reset（）方法

函数fnResetMyForms（）{ //重置所有窗体 var forms=document.getElementsByTagName（“表单”）； 对于（var n=0；n//对于（var n=0；n检查没有表单的内部元素具有name=“reset”或id=“reset”。这可以覆盖表单原型中的默认重置函数属性。我不确定是否值得一提，父页面上也有一个带有重置按钮的表单，但与弹出窗口中打开的表单不共享相同的表单名称/id。我重置父表单的实际函数工作正常，但在尝试调用相同的f时弹出窗口中的函数没有发生任何事情，甚至没有错误。我现在用代码更新了我的OP。我重置父窗体的实际函数工作正常，但当尝试在弹出窗口中调用相同的函数时，没有发生任何事，甚至没有错误。我现在用代码更新了我的OP。

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);

}

<form id="form1" onreset="yourResetFunction()">
    <input type="reset" value="Reset">

<form id="form1">
 <input type="button" value="Reset" onclick="yourResetFunction()">

function fnResetMyForms(){
    //Resets all forms
    var forms = document.getElementsByTagName("form");
    for (var n = 0; n < forms.length; n++) forms[n].reset();
    //Resets only the form you need
    //document.getElementsById("myForm").reset();
    //If you dont know the id, you can ask for specific property
    //for (var n=0; n<forms.length; n++) {
    //  if(forms[n].action=='index.php'){ /* Your code here */ }
    //}
}