Setting Values of Input Box in Iframes via Javascript

Question

johnvisual 0 Newbie Poster

14 Years Ago

Context:

I have a a framed page which have two frames.

First frame have two iframes and second frame also have two iframes.

Each iframe have a form to add record. Each forms have some fields to enter data.

To show the layout of the page, I have created a picture.

Please go through this layout picture at this link: http://docs.google.com/Doc?id=dff38n8b_0c5nb9bcs

Problem:
=========
I have set the following javascript variables in the <head> tag of "leftframe.htm" which represents frame "leftframe"

<script type="text/javascript">
var studentFirstName = "";
var studentLastName = "";
var studentEmailID = "";
var studentScore ="";
var studentCountry="";
var studentEducation="";
var studentSkills="";
var studentHeight="4 Foot 6 Inch.";
var studentWeight="45 Kilogram";
</script>

Now I want to set the value of these variable to the input box (text box) of these forms in different iframes.

Please help me in this regard.

javascript

2 Contributors
4 Replies
1K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by essential

All 4 Replies

essential 84 Posting Shark

14 Years Ago

Meaning, if i passed some entries on the field's present in the leftFrame -- you want those data, to be reflected in the rightFrame inside its iframe which hold's another <form> element's? Am i getting it right?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

johnvisual 0 Newbie Poster · Answer 1 · 2009-05-07T16:10:55+00:00

Meaning, if i passed some entries on the field's present in the leftFrame -- you want those data, to be reflected in the rightFrame inside its iframe which hold's another <form> element's? Am i getting it right?

There are two iframes (leftFirst, leftSecond) in leftFrame frame.
There are two iframes (rightFirst, rightSecond) in rightFrame frame.

All iframes (leftFirst, leftSecond, rightFirst, rightSecond) contain Forms.

I have javascript variables in leftFrame containing values for all the for forms under these four iframes. So when the page load, I want to pass the value of all those javascript variables to the respective field in respective form so that all the fields must have values from those javascript variables.

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-05-07T21:31:55+00:00

I will just shorten out things by using, this document's:
<<<ALL DOCUMENTS ARE NESTED IN THE FOLLOWING ORDER>>>( frames.js-->baseFrame.html-->( leftFrame.html & rightFrame.html "has the same content")-->iframe.html).

Here's the end result's of the project.
The first 1 comes with the .js file, that you need to include inside the base frame...
frames.js:

/*  <<<<<<< USAGE >>>>>>
- The frames.js offer's a simple feature, that allow's you to call element's in your page's using ( Custom get Method ).

It simplifies the work of getting element's in the document using these syntax's : 
(  * var myElement = document.getElementById(elemId) or -
  * var myElement = document.all.elemId; ) --- now can be done by the folowing short syntax's:

1. get("element").innerHTML; ( same as declared in:
 document.getElementById("element").innerHTML;

2. 
 * get("frame1->frame2") & get("frame1->frame2->frameElements"), 

i've included this two feature's, so that i can skip working with the long declaration of: window.prop.frames.frames.frameElements.

-- Note, that each parameter must be separated using this "->" arrow.

Examples:

* get("frame1->frame2").location / same as declared in :

window.top.document.getElementById("frame1").document.getElementById("frame2").location 
 
* get("frame1->frame->frameElement").value / same as declared in :

window.top.document.getElementById("frame1").document.getElementById("frame2").document.getElementById("frameElement").value; 

This script support's all major browsers ( IE, FF, OP, etc. )
*/
/* NO EDITING REQUIRED */

var get, viaID;
viaID = Boolean( document.getElementById );
get = function( FRAMEOBJ ) {
   if (( FRAMEOBJ ) && ( FRAMEOBJ.indexOf("->") !== -1 )) {
      param = FRAMEOBJ.split(/[\-\>]+/);
      try { 
      return (( viaID ) ? (( param[2] !== undefined ) ? window.top.document.getElementById( param[ 0 ] ).document.getElementById( param[ 1 ] ).document.getElementById( param[ 2 ] ) : window.top.document.getElementById( param[ 0 ] ).contentWindow.document.getElementById( param[ 1 ] )) : (( param[ 2 ] !== undefined ) ? eval( "parent.frames." + param[ 0 ] + ".frames." + param[ 1 ] + ".document.all." + param[ 2 ] + ";" ) : parent.frames[ param[ 0 ] ].document.all[ param[ 1 ] ] )); 
      } catch( e ) {
        return (( e.description ) ? alert( e.description ) : alert( e.message )); 
      } 
   } else {
     return (( viaID ) ? document.getElementById( FRAMEOBJ ) : eval( "document.all." + FRAMEOBJ + ";" )); 
   } 
};

and here's the code for the baseFrame.html

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Base Frame</title>
<script type="text/javascript" src="./frames.js"></script>
<script type="text/javascript">
// <![CDATA[
var data, rightIframe, fLen;

data = { // Your declared variable converted into  objects and also assigned as id for the input element's -->
student1 : { 
studentFirstName : "First Name",
studentLastName : "Last Name",
studentEmailID : "email@mail.com",
studentScore : "100%",
studentCountry : "USA",
studentEducation : "Education",
studentSkills : "Skills",
studentHeight : "4 Foot 6 inch.",
studentWeight : "45 kilograms"
   }
};
window.onload = function() {
rightIframe = get("rightFrame->iframe2->frm1");
/* As you can see with the 3 parameters provided in get method: 

The first "rightFrame" parameter represent's the id of the framed page who hold's an iframe with this  ("iframe2") id, that get's the form represented as "frm1" (which is the form id).
*/


for ( var x in data.student1 ) {
 // Passing all data in the form, present in the iframe2 inside the rightframe.

 rightIframe.elements[x].value = data.student1[x]; 
   }  
};
// ]]>
</script>
</head>
<frameset id="lf" cols="50%,50%">
<frame src="frame1.html" id="leftFrame" noresize="noresize" scrolling="no" />
<frame src="frame2.html" id="rightFrame" noresize="noresize" scrolling="no" />
</frameset>
</html>

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-05-07T22:41:57+00:00

(frame2.html "rightFrame" and frame1.html "leftFrame") both has the same content, except their elements ids and names:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Right Frame</title>
<style type="text/css">
body { 
   background-color : #fff;
   width : 300px;
   min-height : 400px;
}
div#iframe { 
   position : relative;
   overflow : hidden;
}

iframe {
   background-color : #fff;
   clear : both;
   display : block;
   border : none;
   position : absolute;
   top : 10px;
   left : 90px;
   min-height : 200px;
   width : 80%; }
</style>
</head>
<body>
<p><b>Frame 2</b></p>
<div id="iframe"><iframe id="iframe2" src="./iframe.html" scrolling="no"></iframe></div>
</body>
</html>

iframe.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Iframe Two</title>
<style type="text/css">
body { 
   background-color : #eee;
   color : #405060;
   width : 300px;
}
input { display : block; text-align : center; margin-bottom : .400em; }
form { padding : .500em; }
</style>
<script type="text/javascript">
// <![CDATA[


// ]]>
</script>
</head>
<body>
<div>
<form action="#" id="frm1" onsubmit="return false;">
<div>
<b>Student Profile</b>
<br /><br />
<label for="studentFirstName">First Name: <input type="text" id="studentFirstName" name="studentFirstName" value="" size="15" /></label>

<label for="studentLastName">Last Name: <input type="text" id="studentLastName" name="studentLastName" value="" size="15" /></label>
<label for="
studentEmailID">E-mail ID: <input type="text" id="
studentEmailID" name="
studentEmailID" value="" size="15" /></label>
<label for="studentScore">Score's: <input type="text" id="studentScore" name="studentScore" value="" size="15" /></label>
<label for="studentCountry">Country: <input type="text" id="studentCountry" name="studentCountry" value="" size="15" /></label>
<label for="studentEducation">Education: <input type="text" id="
studentEducation" name="
studentEducation" value="" size="15" /></label>
<label for="studentSkills">Skills: <input type="text" id="studentSkills" name="studentSkills" value="" size="15" /></label>
<label for="studentHeight">Height: <input type="text" id="studentHeight" name="studentHeight" value="" size="15" /></label>
<label for="studentWeight">Weight: <input type="text" id="studentWeight" name="studentWeight" value="" size="15" /></label>
<br />

</div>
</form>
</div>
</body>
</html>

It'd be much better if you will declare all variable's inside the base frame.

Setting Values of Input Box in Iframes via Javascript

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers