Window Child, Close, Refreshing
Displaying Alert window with message
We can display alert messages in a new window to the visitor using client side JavaScript alert function. This is one useful tool to inform or alert the user by displaying some messages. Alert message window will have only one button displaying “OK” and there is no conform or cancel button. To get the user input by displaying conform or cancel buttons we have to use confirm window function. Alerts can be programmed to display different messages based on requirements and it can be programmed by using server side scripting languages. But for showing alert window we have to use JavaScript commands only.
In our example we have shown one button and called a function show_alert by connecting it to onClick event of the button.
Here is the code to display an alert message window.
alert(msg);
Here msg is the variable and we are displaying the text stored inside the variable msg in the alert box.
Here is the demo of this code. Click the button below to display the alert message.
Here is the code of the alert window
<html><head>
<title>(Type a title for your page here)</title>
<script type=”text/javascript”>
function show_alert() {
var msg = “Welcome to plus2net.com”;
alert(msg);
}
</script>
</head>
<body >
<input type=button value=’Click here to display alert message’ OnClick=”show_alert()”>
</body></html>
Displaying Alert window with message
By using JavaScript prompt we can ask the visitor to enter data to our system for further processing. The prompt command will display a window and ask visitor to enter some data. We can collect the data entered by the user and store them in a variable. Here is some example.
.
var my_string = prompt(“Please enter your name”);
document.write(my_string)
We can show some default text while displaying the prompt. Here is an example where a default message is displayed for the visitor to enter first name.
document.write(my_string)
The above code will display the prompt window with some default text.
We can check the entered data by using if else condition.
Here is the demo of this code. Click the button below to display the prompt message.
Displaying Confirm window for user input
We can display a confirm box to the visitor and ask their opinion. This confirm window will have two buttons, one for OK and other for CANCEL. Visitor can click one if the two buttons and the user action can be captured by assigning this to a variable. The confirm box will return TRUE if the OK button is clicked and it will return FALSE if cancel button is clicked.
We can further improve this by linking the returned value of the confirm button to an alert window.
Here is the code for a confirm box linked to an alert window.
if(my_string){alert(“Thank you”);
}else{
alert(“Please use the contact us page to give your feedbacks”);}
Here is the demo of this code. Click the button below to display the confirm options .
Opening a small (or child ) window from a main ( or parent ) window
We can open a small window known as child window by clicking a button or a link or a image of a main window. We can control the width, height and location ( alignment from top left corner of the screen ) of the small window from the main window. Here we can control the status bar, tool bar and resize the child window from the main window. By changing the value of status to 1 form 0 (status=1;) we can display the status bar for the child window. Same way by making the toolbar=1; we can display the tool bars for the small window. We can change the value of left to position the window horizontally. If we make the value of left to 0 like left=0; to align the window to left edge of the screen. Same way by making the top=0; we can place the window at the top of the screen. Don’t forget to refresh the parent window every time you change the parameters.
Here is the code at the parent window to display the link. Click the demo link to see how the window opens.
Here is the code of the above link
<a href=”javascript:void(0);”
NAME=”My Window Name” title=” My title here ”
onClick=window.open(“window-child.html”,”Ratting”,”width=550,height=170,0,status=0,”);>Click here to open the child window</a>
Here is a button to open the same window
<input type=button onClick=window.open(“window-child.html”,”Ratting”,”width=550,
height=170,left=150,top=200,toolbar=0,status=0,”); value=”Open Window”>
Scrollbar on child window
We can add scroll bar to child window by adding scrollbars=1 while opening the window. Here is the modified code.
<a href=”javascript:void(0);”
NAME=”My Window Name” title=” My title here ”
onClick=window.open(“window-child.html”,”Ratting”,”width=550,height=170,0,status=0,scrollbars=1″);>Click here to open the child window</a>
Closing of a small (or child ) window On click of button
A child window can be closed after displaying some information or taking some inputs from the user. The window can be self closed or can be closed by clicking a button or a link inside it. To know on how to open a child or small window you can refer to our tutorial here. You can take the input from user and automatically close the window depending on the requirements. Even you can refresh the parent window while before closing the main window. Here are the commands for closing the child window.
<input type=button onClick=”self.close();” value=”Close this window”>
Refreshing parent window from child window
Refreshing the parent window or main window from a child or small window is a common requirement. For example in an auction script we can display the present highest bid and we can ask the bidder to enter the bid amount by opening a child window. Here once the bid is entered and submitted the child window should close and then the parent window must refresh to display the entered bid amount. Here we will use the code at the child window to refresh the parent window. Please read the child window open and child window close tutorials before trying this. Here is the code to refresh the parent window from the child window.
<input type=button onClick=window.open(“window-child2.html”,”Ratting”,”width=550,height=170,
left=150,top=200,toolbar=0,status=0,”); value=”Open Window”>
The code of the child window is here
<html>
<head>
<title>(Type a title for your page here)</title>
<SCRIPT language=JavaScript>
<!–
function win(){
window.opener.location.href=”window-refreshing.php”;
self.close();
//–>
}
</SCRIPT>
</head>
<body bgcolor=”#ffffff” >
<font face=’Verdana’ size=’2′ >This is the child window opened . Click the button below to close this window and refresh the main window</font>
<br><br>
<center><input type=button onClick=”win();” value=”Close this window”></center>
</body>
</html>