/    Sign up×
Community /Pin to ProfileBookmark

HELP! Moving Data from an IFRAME to the Parent

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

[email][email protected][/email]

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

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@Khalid_AliJul 22.2003 — in the iframe put something like this line in the UpdateField() function

parent.formName.hiddenFieldName.value=document.formName.listboxName.options[document.formName.selectedIndex].value
Copy linkTweet thisAlerts:
@sbrittonauthorJul 22.2003 — Does this mean that I should move the Function() to the IFRAME HTML file and then in that function use your code snippet?
Copy linkTweet thisAlerts:
@Khalid_AliJul 22.2003 — well I'd say that might be a better choice..
Copy linkTweet thisAlerts:
@sbrittonauthorJul 22.2003 — 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>
Copy linkTweet thisAlerts:
@Khalid_AliJul 22.2003 — 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">
Copy linkTweet thisAlerts:
@sbrittonauthorJul 22.2003 — WOW!!! After a very slight change to the script it WORKED!!! Amazing.

You are the MAN!
Copy linkTweet thisAlerts:
@Khalid_AliJul 22.2003 — ? you are welcome ?
×

Success!

Help @sbritton spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...