PDA

Click to See Complete Forum and Search --> : HELP! Moving Data from an IFRAME to the Parent

sbritton
07-22-2003, 11:47 AM
Orignally I was looking for a way to populate a OPTION list with an external HTML file that would be cached by the browser because of it's size (450k).

Since there isn't anything like an HTML INCLUDE option and doing a JAVASCRIPT WRITELN would take too long (10,000 values). I settled on using IFRAME and the SRC option to allow the browser to cache this large/static snippet of HTML (saving network bandwidth).

The problem now is that when the user submits the form, the item selected in the IFRAME is not sent along with the GET/POST header.

To work around that problem I decided to make a hidden field (unhidden in the example below) that would get populated at an ONCLICK event in the IFRAME. However, that doesn't seem to work; it's like the IFRAME can't access the parent's JSCRIPT functions. Who knows??!?

Any ideas? I also need to know the correct syntax for the Function to get the IFRAME's OPTION SELECTED value.

A bazillion thanks to the all knowing person who figures this out!!

shawn_britton_2000@yahoo.com


TEST.HTM
================
<html>
<head>
<title>Quick Drug List Load</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function UpdateField() {
document.DrugTest.drugselected.value = "NEED TO GET VALUE FROM IFRAME OPTION FIELD HERE. WHAT IS THE PROPER JSCRIPT TO DO THIS?";
}
//-->
</script>
</head>
<body>
<form action="http://www.smallbizwebsites.net/sub/emotion/test.htm" method="get" name="DrugTest" id="DrugTest">
<table width="45%" border="0" cellspacing="-1" cellpadding="-1">
<tr>
<td width="28%" valign="top"><div align="right">Title Here</div></td>
<td width="3%"></td>
<td width="69%"><input name="drugtext" type="text" id="drugtext"></td>
</tr>
<tr>
<td valign="top"><div align="right">Title Here</div></td>
<td></td>
<td><input name="drugcheck" type="checkbox" id="drugcheck" value="checkbox"></td>
</tr>
<tr>
<td valign="top"><div align="right">Title Here</div></td>
<td></td>
<td>
<input name="drugselected" id="drugselected">
<iframe src="list2.htm" scrolling="no" frameborder="0" marginwidth="0" width="380" height="100"></iframe>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
============



LIST2.HTM (Truncated for ease of reading)
============
<select name="select" size="5" onclick="UpdateField()">
<option value ="1">1 Plus 1 F</option>
<option value ="2">1000 BC</option>
<option value ="3">12 Hour Antihistamine/Decongestant</option>
<option value ="4">12 Hour Cold</option>
<option value ="5">12 Hour Nasal</option>
<option value ="6">12 Hour Nasal Tablet</option>
<option value ="7">40 Winks</option>
<option value ="8">4-Way Fast Acting Nasal Spray</option>
<option value ="9">5-Aminosalicylic Acid</option>
<option value ="10">8-Mop</option>
<option value ="11">A & D</option>
<option value ="12">A.P.L.</option>
<option value ="13">A.R.M. Allergy Relief</option>
<option value ="14">A/B Otic</option>
<option value ="15">A/Fish Oil</option>
<option value ="16">A/T/S</option>
<option value ="17">A-200 Lice Control</option>
<option value ="18">A-200 Lice Treatment</option>
<option value ="19">A-25</option>
</select>
===============
Khalid Ali
07-22-2003, 12:21 PM
in the iframe put something like this line in the UpdateField() function

parent.formName.hiddenFieldName.value=document.formName.listboxName.options[document.formName.selectedIndex].value
sbritton
07-22-2003, 12:25 PM
Does this mean that I should move the Function() to the IFRAME HTML file and then in that function use your code snippet?
Khalid Ali
07-22-2003, 12:27 PM
well I'd say that might be a better choice..
sbritton
07-22-2003, 12:37 PM
This didn't work. I must have a propblem with the function syntax in the bottom HTML file.

error: parent.drugtest.drugselected is null or not an object

It's like the IFRAME doesn't see the parent.

Here is what I did:


TEST.HTM
==============================
<html>
<head>
<title>Quick Drug List Load</title>
</head>
<body>
<form action="http://www.smallbizwebsites.net/sub/emotion/test.htm" method="get" name="DrugTest" id="DrugTest">
<table width="45%" border="0" cellspacing="-1" cellpadding="-1">
<tr>
<td width="28%" valign="top"><div align="right">Title Here</div></td>
<td width="3%"></td>
<td width="69%"><input name="drugtext" type="text" id="drugtext"></td>
</tr>
<tr>
<td valign="top"><div align="right">Title Here</div></td>
<td></td>
<td><input name="drugcheck" type="checkbox" id="drugcheck" value="checkbox"></td>
</tr>
<tr>
<td valign="top"><div align="right">Title Here</div></td>
<td></td>
<td>
<input name="drugselected" id="drugselected">
<iframe src="list2.htm" scrolling="no" frameborder="0" marginwidth="0" width="380" height="100"></iframe>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>



LIST2.HTM
==============================
<script language="JavaScript" type="text/JavaScript">
<!--
function UpdateField() {
parent.drugtest.drugselected.value=document.subform.druglist.options[document.subform.selectedIndex].value
}
//-->
</script>

<form id="subform">
<select name="druglist" size="5" onclick="UpdateField()">
<option value ="1">1 Plus 1 F</option>
<option value ="2">1000 BC</option>
<option value ="3">12 Hour Antihistamine/Decongestant</option>
<option value ="4">12 Hour Cold</option>
<option value ="5">12 Hour Nasal</option>
<option value ="6">12 Hour Nasal Tablet</option>
<option value ="7">40 Winks</option>
<option value ="8">4-Way Fast Acting Nasal Spray</option>
<option value ="9">5-Aminosalicylic Acid</option>
<option value ="10">8-Mop</option>
<option value ="11">A & D</option>
<option value ="12">A.P.L.</option>
<option value ="13">A.R.M. Allergy Relief</option>
<option value ="14">A/B Otic</option>
<option value ="15">A/Fish Oil</option>
<option value ="16">A/T/S</option>
<option value ="17">A-200 Lice Control</option>
<option value ="18">A-200 Lice Treatment</option>
<option value ="19">A-25</option>
</select>
</form>
Khalid Ali
07-22-2003, 12:52 PM
couple of errors
the form in the main page has name="DrugTest" where as you are trying to reference it in the ifram by
drugtest

JavaScript is case sensitive.

Second you are trying to access the form in the ifram by its nae wehre as you only have an id attribute in it...

below is the fixed code in your iframe

<script type="text/JavaScript">
<!--
function UpdateField() {
parent.DrugTest.drugselected.value=document.subform.druglist.options[document.subform.druglist.selectedIndex].text
}
//-->
</script>

and in the parent page form elements should be like this

<form action="http://www.smallbizwebsites.net/sub/emotion/test.htm" method="get" name="DrugTest" id="DrugTest">
sbritton
07-22-2003, 03:47 PM
WOW!!! After a very slight change to the script it WORKED!!! Amazing.

You are the MAN!
Khalid Ali
07-22-2003, 04:37 PM
:D you are welcome :D