Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Iframe with a form; cannot display the value. Help 1

Status
Not open for further replies.
Keendev

Keendev

Technical User
Jan 23, 2006
106
PH
Hi guys,

Im using iframe.
And I need some help. I just want to get the value of the option that is being selected on the next page. Pls see code below.

Like if i select the 500 from the option it will display the value '500' on the frame page.

Code: 
<script type="text/javascript">
window.onload=function(){
document.getElementById('opt').onchange=function(){
document.getElementById('myframe').style.height=this.value+'px';
}}

</script>
<select size="10" id="opt">
<option selected="selected">Change IFRAME height</option>
<option value="300">Change IFRAME height to 300px</option>
<option value="500">Change IFRAME height to 500px</option>
<option value="1000">Change IFRAME height to 1000px</option>
<option value="100">Change IFRAME height to 100px</option>
<option value="50">Change IFRAME height to 50px</option>
<option value="150">Change IFRAME height to 150px</option>

</select>
<br><br>

<iframe src="result_one.htm" id="myframe" style="border:0px;width:400;">

//output here or on frame the value of height
</iframe>

Thanks in advance.

 
Sort by date Sort by votes
[0] First you have to make the present functionality well-functioned instead of provoking page error at selectedIndex=0 being chosen.

[0.1] Add an empty value to the first option (one solution amongst others).
><option selected="selected">Change IFRAME height</option>
[tt]<option selected="selected" [red]value=""[/red]>Change IFRAME height</option>[/tt]

[0.2] Filter out the empty value.
[tt]
window.onload=function(){
document.getElementById('opt').onchange=function(){
[red]if (this.value) {[/red]
document.getElementById('myframe').style.height=this.value+'px';
[red]}[/red]
}
}
[/tt]
[1.0] >//output here or on frame the value of height

[1.1] "output here" is not an option as it won't show up anywhere when iframe is supported. It only shows when iframe is not which is contradictory.

[1.2] It should then mean to show up "on iframe". In that case, your iframe's src should be from the same origin/domain for security reason. Hence, I can suppose it is.

[1.2.1] In the "result_one.htm" you should provision a container to hold this piece of info, such as this.
[tt]
<body>
<!-- this div is the place holder of showing that info. -->
<div id="divid"></div>
<!-- etc etc all the rest -->
</body>
[/tt]
[1.2.2] If you can do [1.2.1], modify the onchange handler to this will do. (The detail of the actual presentation of the info is up to you.)
[tt]
window.onload=function(){
document.getElementById('opt').onchange=function(){
[red]if (this.value) {[/red]
document.getElementById('myframe').style.height=this.value+'px';
[blue]document.getElementById("myframe").contentWindow.document.getElementById("divid").innerHTML="This frame's height is <span style='color:blue;'>"+this.value+"</span> px.";[/blue]
[red]}[/red]
}
}
[/tt]
[1.2.3] If you're not in the position to modify result_one.htm, you've to create and insert the place holder yourself through the handler - there again the same origin/domain as the parent page is important for security reason. The essential idea remains the same.
 
Upvote 0 Downvote
Hi tsuji ,

How can I output the option value on the "result_one.htm"?

like for ex. I select the option "Change IFRAME height to 500px", then on the result page "result_one.htm" it will display the option value="500" ,500 on the page as text??

thanks for the big help.
 
Upvote 0 Downvote
Hi,

When I tried your advice, everythings is ok except for the output display. The innerHTML="This frame's height is <span style='color:blue;'>"+this.value+"</span> px."; .

Can we put it on one variable, and I'll just call it via that variable.
like for example id_height = this.value;

document.write(id_height);

Is this possible,something like that??

thanks.
 
Upvote 0 Downvote
> How can I output the option value on the "result_one.htm"?
I guess I was addressing the issue in [1.2], was I not?

>it will display the option value="500" ,500 on the page as text
Then let the message be it?
[tt]
document.getElementById("myframe").contentWindow.document.getElementById("divid").innerHTML='The option value="'+this.value+'"';[/tt]
 
Upvote 0 Downvote


When I tried this code :
document.write(this.value);

it displayed "undefined
 
Upvote 0 Downvote
If you use document.write, things couldn't be what you want, maybe not? Do you mean you just want to erase the result_one.htm and let the iframe display the height? Sure.
[tt]
window.onload=function(){
document.getElementById('opt').onchange=function(){
if (this.value) {
document.getElementById('myframe').style.height=this.value+'px';
with (document.getElementById("myframe").contentWindow.document) {
open();
write(this.value);
close();
}
}
}
}
[/tt]
 
Upvote 0 Downvote
Hi tsuji ,

thanks for giving me solutions. However, I tried your it on my side IE but does not display the var.
innerHTML displays nothing on my browser IE 6.

I also tried the recent code, it also displayed nothing.
window.onload=function(){
document.getElementById('opt').onchange=function(){
if (this.value) {
document.getElementById('myframe').style.height=this.value+'px';
with (document.getElementById("myframe").contentWindow.document) {
open();
write(this.value);
close();
}
}
}
}

i put it on result_one.htm.

any other way of outputting in javascript?

The reason why I actually need it to put it on a variable is because I'll be using that javascript var in other parts of the page.

thanks a lot for the time and big help.
 
Upvote 0 Downvote

I am actually will be using coldfusion later for this.
<iframe src="result_two.cfm" id="myframe" style="border:0px;width:400;">

And on my result_two.cfm
<script>
window.onload=function(){
document.getElementById('opt').onchange=function(){
if (this.value) {
document.getElementById('myframe').style.height=this.value+'px';
document.getElementById("myframe").contentWindow.document.getElementById("divid").innerHTML="fasfswaf This frame's height is <span style='color:blue;'>"+this.value+"</span> px.";
}
}
}
//put it on var

'<cfset height_id = this.value>';
</script>
Body : <cfoutput>#height_id#<cfoutput>
.....

 
Upvote 0 Downvote

Hope you can help me me again w/the last part :

ex.
'<cfset height_id = this.value>';

Putting the height id selected in a variable, so I can assign it to a coldfusion variable and use it on other parts of the page.

thanks again, hope you won't get tired. Just the last part now...

 
Upvote 0 Downvote
>9 Nov 08 11:46
>i put it on result_one.htm.
No, you put it on the page where the dropdown resides.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
256
198709km
198709km
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
279
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top