...

View Full Version : HELP: PASSING data from one frame to another frame in a frameset



anaid54
08-30-2010, 09:43 PM
guys help pls.. i need to pass the data in the textfields from the left frame to the textfields in the right frame of my frameset. (ex: dslnum of frame1 will be pass to txtDSLTN of frame2)

frame1:
http://www.mediafire.com/?hge1ws29mdhmu7e

frame2:
http://www.mediafire.com/?k83cb64wbpskw97


thanks in advance!

Lerura
08-30-2010, 11:13 PM
you must give the frames a name, that is used for refence:
<frame name="FrameName" src="mydocument.htm">
every frame name must be unique.

Then, if you example have a <span id="TagId"></span>
you can refer to that tag using javascript as:
parent.FrameName.document.getElementById('TagId').innerHTML;

anaid54
08-30-2010, 11:35 PM
i dont know how that works.. can u elaborate further? im new in javascript.. consider me as a freshman..

anaid54
08-30-2010, 11:37 PM
what i have is this:
<script type="text/javascript">
function copyFields(form)
{
parent.mainFrame.form1.dslnum.value=document.frmNotesMaker.txtDSLTN.value;
}
</script>

Lerura
08-31-2010, 01:06 AM
what i have is this:
<script type="text/javascript">
function copyFields(form)
{
parent.mainFrame.form1.dslnum.value=document.frmNotesMaker.txtDSLTN.value;
}
</script>

You cannot change data in another document that way;

AFAIR you can do it the other way around by using:
document.form1.dslnum.value=parent.secondFrame.frmNotesMaker.txtDSLTN.value.
in the recieving document
This way applying data FROM another document an not TO

Old Pedant
08-31-2010, 01:29 AM
I gave you this SAME ANSWER before.

This code is WRONG:

function copyFields(form)
{
var frmNotesMaker = window.parent.mainFrame.document.frmNotesMaker;
document.frmNotesMaker.txtDSLTN.value = document.form1.dslnum.value;
}

The part in red DOES NOT BELONG there. Get rid of it.

I think it is confusing to use the same name in two different ways.

And it is also POINTLESS to pass the form reference into the function and then IGNORE it.

*I* would have coded something like this:


function copyFields(form)
{
var otherForm = window.parent.mainFrame.document.frmNotesMaker;
otherForm.txtDSLTN.value = form.dslnum.value;
}


And the OTHER problem is that your <form> in the mainFrame DOES NOT HAVE A NAME!!!



<form id="frmNotesMaker" action="">

It *NEEDS* a NAME:


<form name="frmNotesMaker" action="">


And then it works.

Old Pedant
08-31-2010, 01:57 AM
You cannot change data in another document that way;
Yes, you can.

I do it all the time.

Lerura
08-31-2010, 02:03 AM
I gave you this SAME ANSWER before.
When???

This code is WRONG:

function copyFields(form)
{
var frmNotesMaker = window.parent.mainFrame.document.frmNotesMaker;
document.frmNotesMaker.txtDSLTN.value = document.form1.dslnum.value;
}

The part in red DOES NOT BELONG there. Get rid of it.

I think it is confusing to use the same name in two different ways.

And it is also POINTLESS to pass the form reference into the function and then IGNORE it.

*I* would have coded something like this:


function copyFields(form)
{
var otherForm = window.parent.mainFrame.document.frmNotesMaker;
otherForm.txtDSLTN.value = form.dslnum.value;
}


Your example is suited for putting in the right frame document.
Except from that it will apply the data from the "right" document to the "left" document.

It should be:

function copyFields(form)
{
var otherForm = window.parent.mainFrame.document.frmNotesMaker;
form.dslnum.value = otherForm.txtDSLTN.value;
}

Old Pedant
08-31-2010, 02:24 AM
Originally Posted by Old Pedant
I gave you this SAME ANSWER before.
When???
Weeks ago. Two weeks I think. Not sure it was in this same forum.

**************


Your example is suited for putting in the right frame document.
Except from that it will apply the data from the "right" document to the "left" document.
No, you are wrong.

Her <frameset> looks like this:


<html>
<head>
</head>
<frameset cols="50%,50%">
<frame name="leftside" src="frame1.html"></frame>
<frame name="mainFrame" src="frame2.html"></frame>
</frameset>
</html>

So my code--when placed in "frame1.html"--will take the contents of "form1.dslnum" from the left frame and place them into the field "frmNotesMaker.txtDSLTN" in the right side "mainFrame".

In actuality, the answer I gave her back then copied several fields from the left frame to the right. I gave her complete working code (the frameset and both files for the frames) and somehow I guess in modifying it to match her actual field names she mucked it up.

Old Pedant
08-31-2010, 02:27 AM
Yeah, I still have the code sitting here on this machine. August 17th.

Here are the files I gave her:

MAIN.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<frameset cols="*,*" frameborder="no" border="0" framespacing="0">
<frame src="LEFT.html" name="leftFrame" id="leftFrame" title="leftFrame" />
<frame src="RIGHT.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body>
</body></noframes>
</html>

LEFT.html:


<!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>Untitled Document</title>
<script type="text/javascript">
function copyFields(form)
{
var other = window.parent.mainFrame.document.form1;
other.phonenumber.value = form.phonenumber.value;
other.fullname.value = form.fname.value + " " + form.lname.value;
other.country.value = form.loc.options[form.loc.selectedIndex].text;
other.txtarea.value = form.ticketnum.value
+ "\n" + form.prevticketnum.value
+ "\n" + form.txtarea.value;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>Phone Number:
<input type="text" name="phonenumber" />
</p>
<p>First Name:
<input type="text" name="fname" />
</p>
<p>Last Name:
<input type="text" name="lname" />
</p>
<p>Location:
<select name="loc" >
<option>united stated</option>
<option>united kingdom</option>
<option>australia</option>
</select>
</p>
<p>Ticket Number:
<input type="text" name="ticketnum" />
</p>
<p>Previous Ticket Number:
<input type="text" name="prevticketnum" />
</p>
<p>
<textarea name="txtarea" cols="45" rows="5"></textarea>
</p>
<p>
<input type="button" value="Create" onclick="copyFields(this.form);" />
</p>
</form>
</body>
</html>

RIGHT.html:


<!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>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>DSL Number:
<input type="text" name="phonenumber" id="phonenumber" />
</p>
<p>Full Name:
<input type="text" name="fullname" id="fullname" />
</p>
<p>Country:
<input type="text" name="country" id="country" />
</p>
<p>
<textarea name="txtarea" id="txtarea" cols="45" rows="5"></textarea>
</p>
<p>
<input type="submit" name="create" id="create" value="Submit" />
</p>
</form>
</body>
</html>

Go ahead, try them yourself. I even combined the two name fields into one as she asked and even created the right side textarea with the compound contents from the left side, as she asked.

Lerura
08-31-2010, 02:35 AM
Sorry! I have confused the frames.
Well ,I havent seen all the documents, so....

aniad54: please ignore my last change.

Old Pedant
08-31-2010, 02:40 AM
Ten to one this all came about because she didn't give a NAME= to the <form> in the second frame.

Lerura
08-31-2010, 02:47 AM
Ten to one this all came about because she didn't give a NAME= to the <form> in the second frame.

The worst when making webpages.
That such "small" things, can make it all **** up;

anaid54
09-02-2010, 04:48 AM
guys thanks!..

anaid54
09-02-2010, 05:15 AM
what if i have this frameset: http://www.mediafire.com/?75dvswgvelw19a9

this is somehow the like my other posts but im dealing with the radio buttons. what i want is when i click on the "create" button in form1 http://www.mediafire.com/?eld7a1rb21h799e it will pass the value to form 2 http://www.mediafire.com/?f0o060cdpyf06ya.

so when i select "yes" in form1 and click on "create" it will autoselect "On" in form2. if i select "no" in form1 and click on "create" it will autoselect "off" in form2.

Lerura
09-02-2010, 05:57 AM
add
onclick="transfer2form2()" to the button in form1.html

and ads this script to the head
<script><!--
function transfer2form2(){
x=document.getElementsByName('radio');
q=(x[0].checked?0:1)
parent.mainFrame.document.getElementsByName('switcher')[q].checked=true;

}
// --></script>

anaid54
09-03-2010, 01:09 AM
i did what you instructed me to do.. it does select the button on the other frame but on form2 when On is selected it doesnt show the hidden fields.. why is that?

Lerura
09-03-2010, 11:32 AM
in the mainFrame.document you put

function Toogle(RadioButton){
document.getElementById('hiddenfield').style.display = (RadioButton.checked==true:'block','none');


to the "On" radiobuttton you add
onchange="Toggle(this)";

Here "this" is a special variable that refers to the element from which this function is executed.

anaid54
09-04-2010, 02:18 AM
is there a way that i can call the function in frame2 by clicking on the button on frame1?

Lerura
09-06-2010, 12:55 AM
The function i suggested for the button in form1.html:
<script><!--
function transfer2form2(){
x=document.getElementsByName('radio');
q=(x[0].checked?0:1)
parent.mainFrame.document.getElementsByName('switcher')[q].checked=true;

}
// --></script>

checks what radiobutton is checked when you click the button and changes the related radiobutton in form2.html. (off -> No and on -> Yes)

This is the radiobuttons that you currently have in form2.html

<div id="divRadio">
<input id="apptyes" name="switcher" type="radio" value="apptyes" checked="checked" onclick="toggleLayer(this);" />
<label for="on">On</label>
<input id="apptno" name="switcher" type="radio" value="apptno" onclick="toggleLayer(!this.checked);" />
<label for="off">Off</label>
</div>

change it to:
<div id="divRadio">
<input id="apptyes" name="switcher" type="radio" value="apptyes" checked="checked" onchange="toggleLayer();" />
<label for="on">On</label>
<input id="apptno" name="switcher" type="radio" value="apptno" />
<label for="off">Off</label>
</div>
notice that I have removed toggleLayer from "apptno", AND changed the onclick in "apptyes" to a onchange
This way you can execute toggleLayer BOTH by clicking AND by call from a script.
As there is only two radiobuttons, then whenever one of them changed, the other one changes too. Hence whenever a change is made "apptyes" changes too.

toggleLayer current is:
function toggleLayer(val)
{
if(val == 'on' || val === true)
{
document.getElementById('apptyes').checked = true;
document.getElementById('divAppointment').style.display = 'block';
}
else if(val == 'off' || val === false)
{
document.getElementById('apptno').checked = true;
document.getElementById('divAppointment').style.display = 'none';
}
}

That we change to a simple "is-the-radiobutton-ckecked-function":
function Toogle(RadioButton){
document.getElementById('divAppointment').style.display = (RadioButton.checked==true:'block','none');

This function check if the button from which the function was called, in this case "appyes", has become checked or unchecked.
If "appyes" has become checked, then "divAppointment" is displayed.
And if "appyes" has become unchecked, then "divAppointment" is hidden.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum