Resetting form in popup div

Question

I have a page that lists previously entries made by a user with a link to each that will call a function that opens an edit page in a pop-up div.

The edit page just contains a form with update and reset buttons but whenever I select the reset button to return the form to its initial state nothing happens.

I've had a look online the last couple of days to try and get some more understanding of what might be causing this but it's like the javascript function that is called on clicking of the Reset button just ignores the document.getElementById(form).reset() command as there is no javascript error returned.

Here is a sample of the code on 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>

And this is child.cfm which opens in the popup:

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

And this is the two functions called in 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);

}

What is the best method for getting this form to reset?

Check no form's inner element has name="reset" or id="reset". this can override the default reset function property from forms' prototype — Plap, Apr 16 '13 at 15:24
I'm not sure if it's worth mentioning that the parent page also has a form with a reset button on it but does not share the same form name/id as the form that opens in the popup. — CPB07, Apr 16 '13 at 15:33

score 0 · Answer 1 · edited May 23 '17 at 12:12

The method depends on whether you want to attach the reset event to the form using onreset, or to the actual button using onclick.

Clicking on a reset button triggers to onreset event of the <form> element. In HTML the onreset event is attached to the <form> element:

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

In this case, yourResetFunction() will be called when you click on the reset button of the form, sicne it's attached to the onreset event of the form.

If you instead want to trigger a reset when the button is clicked, change the input type of the button from "reset" to "button", and attach the reset event to the button's onclick event.

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

A similar question was also asked here: How to run JavaScript code when a form is being reset?

My actual function for resetting the parent form works fine but when trying to call the same function in the popup window nothing happens, not even an error. I've updated my OP with code now. — CPB07, Apr 17 '13 at 09:23

score 0 · Answer 2 · answered Apr 16 '13 at 20:56

0

Try to get the forms and exec the .reset() method.

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

answered Apr 16 '13 at 20:56

jherax

5,238
5
38
50

My actual function for resetting the parent form works fine but when trying to call the same function in the popup window nothing happens, not even an error. I've updated my OP with code now. – CPB07 Apr 17 '13 at 09:22

Resetting form in popup div

2 Answers2