pls whats wrong with my popup login script

[adsegzy]

I have a popup login script in which once a visitor clicks on LOGIN link on any page, login form will popup. The script is as below.

<style type="text/css">
   #popupbox{
   margin: 0; 
   margin-left: 40%; 
   margin-right: 40%;
   margin-top: 50px; 
   padding-top: 10px; 
   width: 20%; 
   height: 150px; 
   position: absolute; 
   background: #FBFBF0; 
   border: solid #000000 2px; 
   z-index: 9; 
   font-family: arial; 
   visibility: hidden; 
   }
   </style>
   <script language="JavaScript" type="text/javascript">
   function login(showhide){
     if(showhide == "show"){
         document.getElementById('popupbox').style.visibility="visible";
     }else if(showhide == "hide"){
         document.getElementById('popupbox').style.visibility="hidden"; 
     }
   }
   </script>

 <div id="popupbox"> 
<?php
if(isset($_POST[Submit11])){
$email=stripslashes($_POST[email]);
$pword=stripslashes($_POST[pword]);
$pw=md5($pword);

if($email=="") echo "Enter your Email.<br>";
elseif($pword=="")  echo "Enter your Password.<br>";
else { echo "<b>Welcome</b><br>";
echo "<meta http-equiv='refresh', content='2'>";}
}
?>
 <form name="login" action="" method="post">
 <center>Username:</center>
 <center><input name="username" size="14" /></center>
 <center>Password:</center>
 <center><input name="password" type="password" size="14" /></center>
 <center><input type="submit" name="submit" value="login" /></center>
 </form>
 <br />
 <center><a href="javascript&#058;login('hide');">close</a></center> 
 </div>

 <a href="javascript&#058;login('show');">login</a>

My problem here is that once the visitor clicks on "login" button on the pop up window without entering his username or password, the window will just disappear instead of echoing "Enter your Username or password". Also if the member enters his username and password correctly, the window will just disappear instead of echoing welcome and refresh the page on which the member clicked login.

Pls what do I do wrong. Thanks

Pls what do I do wrong.

Apart from the 1990's html?
Your issue is js not php, I think.

The links may be better served with the onclick attribute:

onclick="login('show');"

[moyk]

You miss semantics, formatting, and syntax.

Css code -> in a separate file.
Javascript -> in a separate file too, unobstrusive Javascript.

Your PHP code is wrong, especially concerning the conditions syntax. Here:

<?php
if (isset($_POST[Submit11])) {

    $email=stripslashes($_POST[email]);
    $pword=stripslashes($_POST[pword]);
    $pw=md5($pword);

    if($email=="") {
        echo "Enter your Email.<br>";
    }

    else if($pword=="") {
        echo "Enter your Password.<br>";
    }

    else {
        echo "<b>Welcome</b><br>";
        echo "<meta http-equiv='refresh', content='2'>";
    }
}
?>

Concerning your html, you miss attributes for the a tag, and again, some basic semantics standards.
Also, forget the center tag -> obsolete.

<form name="login" action="" method="post">

<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>

</form>
<br />
<center><a href="" title="" class="close">close</a></center> 
<a href="" title="" class="login">login</a>

Finally, your JS, in a seperate file:

$(function() {

    $('.close').click(function () {
        $('#popupbox').fadeOut('slow');
    });

    $('.login').click(function () {
        $('#popupbox').hide().fadeIn('slow');
    });
});

You need JQuery to implement this, insert it in your .html document with the script tag:

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js