ユーザーが作成した以前のエントリと、ポップアップ div で編集ページを開く関数を呼び出す各エントリへのリンクを一覧表示するページがあります。
編集ページには、更新ボタンとリセット ボタンのあるフォームだけが含まれていますが、フォームを初期状態に戻すためにリセット ボタンを選択しても、何も起こりません。
過去数日間、オンラインでこれを引き起こしている可能性のあるものをもう少し理解しようとしましたが、リセットボタンのクリック時に呼び出される JavaScript 関数が document.getElementById(form) を無視するようです。 javascript エラーが返されないため、reset() コマンドを使用してください。
これは、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 で呼び出される 2 つの関数です。
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);
}
このフォームをリセットするための最良の方法は何ですか?