PDA

View Full Version : Access attribute values in iFrame



Brad_Armitage
01-19-2010, 09:58 PM
I need to copy input (checkbox) values from a form inside my iframe to the form in my parent frame using javascript and I'm not sure how to modify my current code to accomplish this! I'm using cold fusion to display the values from a database inside the iframe. Once all the values are loaded into the iframe, I need to be able to select as many as necessary and then submit the form from the parent frame which then runs a report that utilizes those values, but I can't do that because my code is written so that the values load in the iframe form and the action to run the report that requires those values is executed from the form in my parent frame. Here are the code snipits:



Main "Parent" Frame Code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<cfparam name="WordFlag" default="0">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script language="javascript" type="text/javascript">
checked=false;
function checkedAll (frm2) {
var aa= window.document.ActivityFrame.document.getElementById('frm2');
if (checked == false)
{
checked = true
}
else
{
checked = true
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}

checked=true;
function uncheckedAll (frm2) {
var aa= window.document.ActivityFrame.document.getElementById('frm2');
if (checked == true)
{
checked = false
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}

function checkVal (frm2) {
var chks = window.document.ActivityFrame.document.getElementsByName('ActivityList');
var hasChecked = false;
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
hasChecked = true;
break;
}
}
if (hasChecked == false) {
alert("Please select at least one activity!");
return false;
}
return true;
}
</script>

</head>

<body>
<table>
<tr>
<td><CFOUTPUT><H1>#lblReportName#</H1></CFOUTPUT></td>
</tr>
<tr>
<td><CFOUTPUT><H1>#cookie.strProjectName#</H1></CFOUTPUT></td>
</tr>
</table>
<form id="frm1" name="frmPMSelection" method="post" action="../report_manager/index.cfm?fuseaction=ProjectMediaAudit&lblReportName=#URLEncodedFormat(lblReportName)#&WordFlag=#WordFlag#" target="_self">
<table>
<tr>
<td align="left"><CFOUTPUT>#lblSelectPMAActivities#</CFOUTPUT><br /><br /></td>
</tr>
<tr>
<td>
<table>
<tr>
<td align="right">
<cfoutput>
<a href="javascript:checkedAll()"><img src="../graphics_interface/buttons/select_all_#cookie.numLanguagePref#.gif" alt="#Request.lblSelectAll#" title="#Request.lblSelectAll#" align="absmiddle" border="0" /></a>&nbsp;
<a href="javascript:uncheckedAll()"><img src="../graphics_interface/buttons/select_none_#cookie.numLanguagePref#.gif" alt="#Request.lblSelectNone#" title="#Request.lblSelectNone#" align="absmiddle" border="0" /></a>&nbsp;
</cfoutput>
<CFSCRIPT>Request.cshelp.showHelp(str_contentType="screen",str_contentID="",str_helpText=Request.str_lang_cshelp);</CFSCRIPT>
</td>
</tr>
<tr>
<td class="TABLEDATA">
<cfoutput>
<iframe name="ActivityFrame" scrolling="auto" width="480" height="360" src="./index.cfm?fuseaction=ProjectMediaAuditFrame"></iframe>
</cfoutput>
</td>
</tr>
<tr>
<td>
<cfoutput>
<input type="image" src="../graphics_interface/buttons/submit_#cookie.numLanguagePref#.gif" alt="#Request.lblSubmit#" title="#Request.lblSubmit#" align="absmiddle" border="0" onclick="return checkVal()" />&nbsp;
<a href="javascript:void(0);"><img src="../graphics_interface/buttons/cancel_#cookie.numLanguagePref#.gif" alt="#Request.lblCancel#" title="#Request.lblCancel#" align="absmiddle" border="0" onclick="self.location='../report_manager/index.cfm'" /></a>
</cfoutput>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>




iFrame Code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
<table>
<tr>
<td>
<form id="frm2">

<CFOUTPUT QUERY="qryLODetails">
<input type="checkbox" value="#lo_code#" name="ActivityList" />#lo_name#<br />
</CFOUTPUT>

</form>
</td>
</tr>
</table>
</body>
</html>



I'm thinking that loading the values into some sort of hidden comma delimited string structure in the parent frame would do the trick, any ideas, and if I'm on the right track, how would I go about doing that? Also, you shouldn't need to see the query or the report page code to help me with the javascript I require, but if you do need anything else please let me know!!

Old Pedant
01-19-2010, 10:19 PM
Not hard.

Can you add code to the iframe contents, or must the code all reside in the parent???

Old Pedant
01-19-2010, 10:21 PM
And should the fields in the main frame's form have the same names as the fields in the iframe's form? If not, then we need a "mapping" from one name to the other.

Old Pedant
01-19-2010, 10:25 PM
Whoops...last question...Noticed that your example field is a checkbox.

Unchecked checkboxes don't get sent to the server by a POST (or GET) form submit, so can we just ignore unchecked checkboxes? I can't see why we couldn't, but if there is JS code in the main page that expects them to be there, maybe we can't.

NOTE: I am *assuming* that the fields do NOT EXIST AT ALL in the main page's form. That is, I need to write code that adds the actual form fields to the main page form. If the fields actually already exist in the main page form, then it's even more trivial.

Brad_Armitage
01-21-2010, 06:57 PM
Thanks for your replies Old Pedant, but as I was waiting for a response, I managed to find a solution myself! Here are the changes I made to my current javascript and form code on the main "parent" frame page only (the iframe page code remained the same and also, just in case you're wondering, I removed the select all and select none html and javascript code on purpose, they were simply no longer needed):




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<cfparam name="WordFlag" default="0">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><CFOUTPUT>#lblReportName#</CFOUTPUT></title>

<script language="javascript" type="text/javascript">

function checkVal (frm2) {
if (Prototype.Browser.IE) {
var chks = window.document.ActivityFrame.document.getElementsByName('ActivityList');
} else {
var chks = document.getElementById('ActivityFrame').contentDocument.getElementsByName('ActivityList');
}

var values = "";

var hasChecked = false;
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
hasChecked = true;
if (values != "") values = values + ",";
values = values + chks[i].value;
}
}
if (hasChecked == false) {
alert("Please select at least one activity!");
return false;
}

$('ActivityList').value = values;
return true;
}

</script>

</head>

<body>
<table>
<tr>
<td><CFOUTPUT><H1>#lblReportName#</H1></CFOUTPUT></td>
</tr>
</table>
<form id="frm1" name="frmPMSelection" method="post" action="../report_manager/index.cfm?fuseaction=ProjectMediaAudit&lblReportName=#URLEncodedFormat(lblReportName)#&WordFlag=#WordFlag#" target="_self">
<input type="hidden" name="ActivityList" id="ActivityList" value="">
<table>
<tr>
<td align="left"><CFOUTPUT>#lblSelectPMAActivities#</CFOUTPUT><br /><br /></td>
</tr>
<tr>
<td>
<table>
<tr>
<td align="right">
<CFSCRIPT>Request.cshelp.showHelp(str_contentType="screen",str_contentID="",str_helpText=Request.str_lang_cshelp);</CFSCRIPT>
</td>
</tr>
<tr>
<td class="TABLEDATA">
<cfoutput>
<iframe name="ActivityFrame" id="ActivityFrame" scrolling="auto" width="800" height="360" src="./index.cfm?fuseaction=ProjectMediaAuditFrame&lblReportName=#URLEncodedFormat(lblReportName)#&WordFlag=#WordFlag#"></iframe>
</cfoutput>
</td>
</tr>
<tr>
<td align="right">
<cfoutput>
<a href="javascript:void(0);"><img src="../graphics_interface/buttons/cancel_#cookie.numLanguagePref#.gif" alt="#Request.lblCancel#" title="#Request.lblCancel#" align="absmiddle" border="0" onclick="self.location='../report_manager/index.cfm'" /></a>&nbsp;
<input type="image" src="../graphics_interface/buttons/submit_#cookie.numLanguagePref#.gif" alt="#Request.lblSubmit#" title="#Request.lblSubmit#" align="absmiddle" border="0" onclick="return checkVal()" />
</cfoutput>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>