title: Resetting form in popup div
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is a sample of the code on parent.cfm</p>
  
  <pre><code>&lt;script language="javascript" src="functions.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;table border="0" cellspacing="5" cellpadding="0" width="850"&gt;
  &lt;form action="##" method="post" name="parentForm" id="parentForm"&gt;
      &lt;input type="hidden" name="formSubmitted" id="formSubmitted" value="1" /&gt;
      &lt;tr&gt;
          &lt;td&gt;Label 1&lt;/td&gt;
          &lt;td&gt;                
              &lt;select name="field1" id="field1"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;            
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Label 2&lt;/td&gt;
          &lt;td&gt;                
              &lt;select name="field2" id="field2"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;            
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Label 3&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="field3" id="field3" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Label 4&lt;/td&gt;
          &lt;td&gt;
              &lt;select name="field4" id="field4"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;                            
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Label 5&lt;/td&gt;
          &lt;td&gt;&lt;textarea name="field5" id="field5" rows="10" cols="75"&gt;&lt;/textarea&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" name="resetFormBtn" id="resetFormBtn" onClick="resetForm('parentForm');" value="RESET" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="button" name="formSubmittedBtn" id="formSubmittedBtn" onClick="checkForm('parentForm');" value="ADD" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/form&gt;
  &lt;/table&gt;
  
  &lt;cfif qryRecords.RecordCount GT 0&gt;      
  &lt;table border="0" cellspacing="5" cellpadding="0" width="850"&gt;
      &lt;cfloop query="qryRecords"&gt;
          &lt;tr&gt;
              &lt;td&gt;Column Name 1&lt;/td&gt;
              &lt;td&gt;#columnName1#&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Column Name 2&lt;/td&gt;
              &lt;td&gt;#columnName2#&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Column Name 3&lt;/td&gt;
              &lt;td&gt;#columnName3#&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Column Name 4&lt;/td&gt;
              &lt;td&gt;#columnName4#&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Column Name 5&lt;/td&gt;
              &lt;td&gt;#columnName5#&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;button name="editRecordBtn" onClick="openPage('childPage.cfm?recordID=#qryRecords.recordID#')"&gt;EDIT RECORD&lt;/button&gt;
              &lt;/td&gt;
              &lt;td colspan="2"&gt;
                  &lt;form action="##" name="removeRecord" id="removeRecord" method="post"&gt;
                      &lt;input type="hidden" name="recordID" value="#qryRecords.recordID#" /&gt;
                  &lt;/form&gt;
                  &lt;button name="removeRecordBtn" onClick="document.getElementById('removeRecord').submit();"&gt;REMOVE RECORD&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/cfloop&gt;
  &lt;/table&gt;
  &lt;/cfif&gt;
  </code></pre>
  
  <p>And this is child.cfm which opens in the popup:</p>
  
  <pre><code>&lt;script language="javascript" src="functions.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;cfoutput&gt;
  &lt;table border="0" cellspacing="5" cellpadding="0" width="850"&gt;
      &lt;form action="##" method="post" name="recordEditForm" id="recordEditForm"&gt;
          &lt;input type="hidden" name="editFormSubmitted" id="editFormSubmitted" value="1" /&gt;
          &lt;tr&gt;
              &lt;td&gt;Label 1&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="field1" id="field1"&gt;
                      &lt;option value="1" &lt;cfif Form.field1 EQ Variables.field1&gt;selected&lt;/cfif&gt;&gt;1&lt;/option&gt;          
                      &lt;option value="2" &lt;cfif Form.field1 EQ Variables.field1&gt;selected&lt;/cfif&gt;&gt;2&lt;/option&gt;
                      &lt;option value="3" &lt;cfif Form.field1 EQ Variables.field1&gt;selected&lt;/cfif&gt;&gt;3&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Label 2&lt;/td&gt;
              &lt;td&gt;                
                  &lt;select name="field2" id="field2"&gt;
                      &lt;option value="1" &lt;cfif Form.field2 EQ Variables.field2&gt;selected&lt;/cfif&gt;&gt;1&lt;/option&gt;          
                      &lt;option value="2" &lt;cfif Form.field2 EQ Variables.field2&gt;selected&lt;/cfif&gt;&gt;2&lt;/option&gt;
                      &lt;option value="3" &lt;cfif Form.field2 EQ Variables.field2&gt;selected&lt;/cfif&gt;&gt;3&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Label 3&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" name="field3" id="field3" value="#Variables.field3#" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Label 4&lt;/td&gt;
              &lt;td&gt;
                  &lt;select name="field4" id="field4"&gt;
                      &lt;option value="1" &lt;cfif Form.field4 EQ Variables.field4&gt;selected&lt;/cfif&gt;&gt;1&lt;/option&gt;                          
                      &lt;option value="2" &lt;cfif Form.field4 EQ Variables.field4&gt;selected&lt;/cfif&gt;&gt;2&lt;/option&gt;
                      &lt;option value="3" &lt;cfif Form.field4 EQ Variables.field4&gt;selected&lt;/cfif&gt;&gt;3&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Label 5&lt;/td&gt;
              &lt;td&gt;&lt;textarea name="field5" id="field5" rows="10" cols="75"&gt;#Variables.field5#&lt;/textarea&gt;&lt;/td&gt;
          &lt;/tr&gt;           
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;input type="button" name="resetRecordBtn" id="resetRecordBtn" onClick="resetForm('recordEditForm');" value="RESET" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;input type="button" name="editRecordBtn" id="editRecordBtn" onClick="checkForm('recordEditForm');" value="EDIT RECORD" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/form&gt;
  &lt;/table&gt;
  &lt;/cfoutput&gt;
  </code></pre>
  
  <p>And this is the two functions called in functions.js:</p>
  
  <pre><code>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 &gt; 0) {
          source = source + '&amp;';
      } 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&gt;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) &amp;&amp; (url.search(/.jpeg/i)==-1) &amp;&amp; (url.search(/.gif/i)==-1) &amp;&amp; (url.search(/.png/i)==-1) &amp;&amp; (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);
  
  }
  </code></pre>
  
  <p>What is the best method for getting this form to reset?</p>