Java script frame window

Lecture 18
In this lecture, we will learn
-> Validating Radio Button

Validating Radio Button Selections
A radio button, provide a set of options, out of which only one can be
selected. Infact, there are lot of simillarities between radio button and check box.
Except one dissimillarity, which is, check box provide a lot of options to be
selected whereas you can only select one option with radio button.

To know which option is selected, the following statement can be used

document.name of the form.name of the button[i].checked,

The above statement returns true if the button is selected otherwise false. The
value of 'i' ranges from (0 to number_of_radio_buttons - 1 ).

Let us take an example.

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
function validate()
{
number_of_radio_buttons=document.myForm.hobby.length;
for (i=0;i<=number_of_radio_buttons-1;i++)
{
if (document.myForm.hobby[i].checked)
{
flag=1;
you_selected=document.myForm.hobby[i].value;
window.alert(you_selected);
return true;
}
else
flag=0;
}
if (flag==0)
{
window.alert("Error! You should select one of the options");
return false;
}
}
</script>

</HEAD>

<BODY>
My hobbies are
<form method="get" action="display.asp" name="myForm"
onSubmit="return validate()">
<input type="radio" name="hobby" value="soccer"> Soccer <br>
<input type="radio" name="hobby" value="read"> Reading <br>
<input type="radio" name="hobby" value="music"> Listening Music <br>
<input type="radio" name="hobby" value="travel"> Travelling <br>

<input type="submit" value="Validate">
</form>
</BODY>
</HTML>

Let us summarize, what we have learned by the above program
1. To know the number of radio buttons: document.name of form.name of
radio button.length
2. To know index of radio button selected: document.name of
form.name of radio button[i].selected
3. To know the value of radio button selected: document.name of form.name of
radio button[i].value

Using the Window Object
We will discuss more about the Window object. We have been already
using the Window object before.

Some of the features of Window object are
1. Creating Alert Dialog Boxes: window.alert()
2. Creating Confirmation Dialog Boxes: window.confirm()
3. Creating Dialog Boxes to get: window.prompt()
information from the user.
4. Opening Pages in new window: window.open()
5. Determining window size
6. Controlling scrolling of the document displayed in window
7. Scheduling the execution of function: window.setTimeout()

So, we have done all this before. This is all we have to learn about window
object.

Open a Full Screen window
The following is the code to open a full screen window

<HTML>
<HEAD>
function showWindow()
{
window.open("","myNewWindow","fullScreen=yes");
}
</script>
</HEAD>
<BODY>
<a href="a.html" onMouseOver="showWindow()" >Click1</a>
</BODY>
</HTML>

Handling the Parent-Child
Relationship of Windows
When the window.open() method is used to open a new window from
JavaScript, a relationship exist between the original window and new window so
that it is possible to refer to both the windows from within JavaScript.

Well, to refer to the child window, simply do this

var newWindow=window.open(“URL”,window name);

Now you can refer to the new window, by newWindow.

Let us take an example

<HTML>
<HEAD>
{
myNewWindow=window.open("","myNewWindow");

}

function closeWindow()

{
myNewWindow.close();
}

function closeThisWindow()
{
window.close();
}
</script>
</HEAD>
<BODY>
<a href="" onMouseOver="showWindow()" >Take the Mouse here to open
a New window</a> <br>
<a href="" onMouseOver='closeWindow()' >Take the Mouse here to close
the Opened Window</a><br>
<a href="" onMouseOver="closeThisWindow()">Take the Mouse here to
close this Window</a>
</BODY>
</HTML>

Let us take another example, where you will open a new window. The new
window have the option for closing the parent window.

<HTML>
<HEAD>
{
myNewWindow=window.open("a.html","myNewWindow");

}

{
}

{
window.close();
}
</script>
</HEAD>
<BODY>


</BODY>
</HTML>

Here is the code for a.html

<HTML>
<HEAD>
function closeOriginalWindow()
{
window.opener.close();
}
</script>
</HEAD>

<BODY>
<a href="" onMouseOver="closeOriginalWindow()">close the original
Window</a>
</BODY>
</HTML>

Writing into New Window

Below is the code, to write into new Window

<HTML>
<HEAD>
{
myNewWindow=window.open("","myNewWindow","width=200,
height=200, left=20, top=50");
myNewWindow.document.open();
myNewWindow.document.write("Take your mouse here to open
new window");
myNewWindow.document.close();

}

{

}

{
window.close();
}
</script>
</HEAD>
<BODY>

</BODY>
</HTML>

Referring Frames In JavaScript
If there are two frames on one page, name of left frame is frame1, and name of
right frame is frame2,
Then frame1 can be referred in JavaScript as parent.frame1 and similarly,
frame2 can be referred as paraent.frame2.

Let us take an example, first make frameset.html, which contains two frames,
frame1 and frame2.

<frameset cols=”50%,50%”>
<frame name=”frame1” src=”frame1.html”>
</framesest>

Here is the code for frame1.html

<HTML>
<HEAD>
function writeFrame2()
{
parent.frame2.document.open();

parent.frame2.document.write(document.forms[0].f1text.value);
parent.frame2.document.close();
}
</script>
</HEAD>
<BODY>

<form>
<input type="text" name="f1text">
<input type="button" value="Write this to Frame 2" onClick="writeFrame2()">
<form>
</BODY>
</HTML>

To understand more about Frame object, Let me compare Frame object with
Window object. In the previous topic, we saw that, window can use the document
object, for ex. window.document.open(), Simmilarly, we can say
frame.document.open(), and then can write into the frame, as you can see in the
abov example. Infact we can use all the functions provided by the document
object.
So, the moral of the story is "Frame object contain a document object".

Let us take another simple example

This is the code for frameset.html

<frame name=”frame2” src=””>
</framesest>

Notice that, source for frame2 doesnot exist

Below is the code for frame1.html

<HTML>
<HEAD>
function writeFrame2()
{
parent.frame2.document.location=document.forms[0].f1text.value;
}
</script>
</HEAD>
<BODY>
<form>
Give the name of HTML file to open in Frame2
<input type="text" name="f1text">
<input type="button" value="Open File in Frame 2" onClick="writeFrame2()">
<form>
</BODY>
</HTML>

If Frames have no name, they can still be referred, like we referred forms. You
guessed it right, first frame is frames[0], second frame is frames[1], and so on.
So we can refer to first frame as parent.frames[0].

Using Frames to Store
Pseudo-Persistent Data
When you are working with frames, it is sometimes useful to be able to
store information in JavaScript variables in such a way that the variable is
available to both the frames.
<frame name=”frame2” src=””>
</framesest>

In the above code, there are three documents.
1. Frame set document.
2. document present in frame1.
3. document present in frame2.

Actually frameset document, contains within itself two more documents,
(document of frame1) and (document in frame2 ).

If you create any variable in document of frame1, it will not be accessible to
document of frame 2. Simmilarly, if you create a variable in document of frame 2,
it will not be accessible to document of frame1. So, you can create a variable in
frameset document, which will be accessible to both frame 1 and frame 2.

So, now create a variable in frameset.html,
Below is the code for frameset.html

var pVariable="This is a persistent value"
</script>
</framesest>


<HTML>
<HEAD>
</HEAD>

<BODY>
This is frame 1 <br>
document.write("The value of persistent variable is "+parent.pVariable);
</script>
</BODY>
</HTML>

<HTML>
<HEAD>
</HEAD>
<BODY>
This is frame 2 <br>
document.write("The value of persistent variable is "+parent.pVariable);
</script>
</BODY>
</HTML>

Java script frame window

More Related Content

What's hot (14)

Viewers also liked (16)

Similar to Java script frame window (20)

More from H K (20)

Recently uploaded (20)

Java script frame window