Saturday 14 January 2012

Open a new browser window using javascript

Hi friends,
   Here I am discuss about open a new browser window when click a button
using javascript
.Have you see pop up windows containing advertisements?
We can create like one very easily.
  
   The javascript function used for pop up a new window is window.open().
The syntax for window.open is :
window.open('http://www.google.com','window_name','width=400,height=200');

   In this function first parameter is the URL of the website to be loaded
in the poped up window opened.Here I am use the address of  Google.com.

   The second parameter of open() function is the name of the window.We
can use this name to access the window later.

   The third parameter is using to set the dimensions of the window which is poped up.

Code of a simple form pop up the Google in a new window:

<FORM>
<INPUT type="button" value="Click Me" onClick="window.open('http://www.google.com','Google','height=600,width=600')">
</FORM>



  Here the window.open() function is called in the onclick event of the button in the form.When click in the button , a pop up window with 600 pixel height and 600 pixel width is opened and google.com will load in it in no time.

  In the third parameter we can include more options like the position of the window.We can use the top and left parameters to set the top and left of the window.

<FORM>
<INPUT type="button" value="Click Me" onClick="window.open('http://www.google.com','Google','height=600,width=600,left=0,top=100')">
</FORM>


This code will open a window with 600 pixels height and width and the top left of the window will be (0,100).
But one thing to be noted is that all these are belongs to the third parameter so these are within a single inverter comma('').


We can also specify that which tool bars will appear in our new window just like this
window.open ("http://www.javascript-coder.com", "mywindow","status=yes,toolbar=no");
By this code I am allowing the status bar and disallow toolbar.

  The other values set in the third parameter is as follows :


status     :     The status bar at the bottom of the window.
toolbar    :     The standard browser toolbar, with buttons such as Back and Forward.
location   :     The Location entry field where you enter the URL.
menubar    :    The menu bar of the window
directories:     The standard browser directory buttons, such as What’s New and What’s Cool
resizable  :    Allow/Disallow the user to resize the window.
scrollbars :    Enable the scrollbars if the document is bigger than the window


   windows.close() can be used to close the opened window.
Another thing to be noted is that many browsers block the opening of pop up windows.So inorder to work  the code above explained please unblock the pop up windows in your browser's settings.

I am including a screen shot :


















Thank you to my dear friends.
You can read :-

Facebook like pop up window using jquery


By Sukesh B R

Thursday 12 January 2012

Multiple submit buttons in a Form in PHP explain with an example

Hi friends, today I am discussing handling multiple submit buttons in a single Form in PHP.
 
According to typical HTML architecture there have one submit button for a Form.When this submit button  is clicked the php page specified by the form action parameter is loaded.

          But some situations we need multiple submit buttons in a single form.In such situations the php page loaded by clicking distinct buttons is same.But the task executed will be different.We can achieve it by isset()  function of PHP.
  
          The syntax for isset() is : isset($_POST["name of submit button in the form"])

We can write the  code for the action page like this:-
 
<?Php
if(isset($_POSt["s1"]))
{
echo "You pressed submit 1";
}

else if(isset($_POSt["s2"]))
{
echo "You pressed submit 2";
}
?>

Where s1 and s2 are the name of submit buttons in the form.

Here I am including a simple calculator example to clear  this concept

This is a screen shot of the program:

 
Source code
calculator.html

<html>
<body>
<form name="f1" method="post" action="sub.php">
Number1 <input type="text" name="n1"></br></br>
Number2 <input type="text" name="n2">
</br></br>
<input type="submit" name="add" value="+">
<input type="submit" name="sub" value="-">
<input type="submit" name="mul" value="*">
<input type="submit" name="div" value="/">
</form>
</body>
</html>

 sub.php 

<?php

if(isset($_POST["add"]))
echo "Sum : ".($_POST["n1"]+$_POST["n2"]);

else if(isset($_POST["sub"]))
echo "Difference : ".($_POST["n1"]-$_POST["n2"]);

else if(isset($_POST["mul"]))
echo "Product : ".($_POST["n1"]*$_POST["n2"]);

else if(isset($_POST["div"]))
echo "Quotient : ".($_POST["n1"]/$_POST["n2"]);
?>


code description:


In calculator.html we can see a form.There have 2 text boxes and 4 submit buttons.The two submit buttons are the
two numbers to perform arithmetic operations.The four submit buttons are for additon,substraction,multiplication and division.
The name of the submit buttons are add,sub,mul,div respectively.

       In sub.php four if else statements are used to determine which submit button is clicked.
 
First if is:
if(isset($_POST["add"]))
Where 'add' is the name of first submit button.isset($_POST["add"])  return TRUE if the submit button clicked is 'add'.If it return true 
echo "Sum : ".($_POST["n1"]+$_POST["n2"]); 
this statement will execute.So the sum of given numbers will be displayed.
If isset() returns FALSE go to the next if statement and check for the click of next submit button.This process will be continued till the clicked button is found.Thus our calculator works properly.

isset() is the standard way to achieve this but we can simply write
if($_POST["add"])
{
echo "Sum : ".($_POST["n1"]+$_POST["n2"]);

for achive the same result.

Hope that this post is helpful to you.Thanks by Sukesh B R

Search This Blog