Question

我有一个页面，其中列出了用户之前创建的条目，每个条目都有一个链接，每个条目都会调用一个在弹出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);

}

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

Answer 1

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

单击重置按钮会触发onreset元素的<form>事件。在HTML中，onreset事件附加到<form>元素：

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

在这种情况下，当您点击表单的重置按钮时，系统会调用yourResetFunction()，并将其附加到表单的onreset事件中。

如果您想在单击按钮时触发重置，请将按钮的输入类型从“重置”更改为“按钮”，并将重置事件附加到按钮的onclick事件。

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

此处也提出了类似的问题：How to run JavaScript code when a form is being reset?

Answer 2

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

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 */ }
    //}
}

重置弹出div中的表单

2 个答案: