javascript - Resetting specific form in popup div -
i have page lists entries made user link each call function opens edit page in pop-up div.
the edit page contains form update , reset buttons whenever select reset button return form initial state nothing happens.
i've had online last couple of days try , more understanding of might causing it's javascript function called on clicking of reset button ignores document.getelementbyid(form).reset() command there no javascript error returned.
here sample of 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 child.cfm opens in 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 2 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 msie x.x; var ieversion=new number(regexp.$1) // capture x.x portion , store 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 best method getting form reset?
use input type reset
<input type="reset" value="reset button" /> 
