0
나는 팝업 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>
의 코드의 샘플입니다 그리고 이것은 팝업에서 열립니다 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>
그리고이 함수에서 호출 된 두 가지 기능입니다 .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);
}
이 양식을 재설정하는 가장 좋은 방법은 무엇입니까?
감사합니다. 나는 이전에 시도했지만 아무 일도 일어나지 않는다. 심지어 오류 메시지도 표시되지 않고 parentform 폼을 재설정했는지 여부를 테스트했지만 테스트하지 않았다. – CPB07