Hello,

I am trying to create an alert message box in my login page in case someone input a wrong password just like in the Cpanel

Well, this is what I did so far:

I copy the code in this demo example: demo

index.php

<!DOCTYPE HTML>

<html>
<head>
<!-- alert add -->
<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.css"/>
<!-- custom classes -->
<link rel="stylesheet" href="index.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/i18n/en.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- end -->


<link href= "../css/admin.css" rel="stylesheet" type="text/css" media="screen">

<script type="text/javascript">
$(function() {

  $("#user_message1").jui_alert({
    containerClass: "container1 ui-widget",
    message: "<img src="images/megaphone.png" style="float: left; width: 30px; margin-right: 10px;">This is a sample message. It will disappear after 6 sec (except you press the pin button)",
    timeout: 6000,
    messageIconClass: ""
  });

  $("#user_message2").jui_alert({
    containerClass: "container2 ui-widget",
    message: "This is a sample message. It will not disappear automatically. More information <a href="http://www.google.com" target="_blank">here</a>.",
    messageBodyClass: "message2",
    timeout: 0,
    use_effect: {effect_name: "slide", effect_options: {"direction": "left"}, effect_duration: "500"}
  });

  $("#user_message3").jui_alert({
    containerClass: "container3 ui-widget",
    message: "This is a <strong>sample error message</strong>. It will disappear after 3 sec (except you press the pin button)",
    timeout: 3000,
    messageAreaClass: "jui_alert_message_area ui-state-error ui-corner-all",
    messageIconClass: "jui_alert_icon ui-icon ui-icon-alert"
  });

});
</script>

<style>
.container1 {
  width: 40%;
  margin: 20px;
}

.container2 {
  width: 50%;
  margin: 20px;
}

.container3 {
  width: 60%;
  margin: 20px;
}

.message2 {
  font-size: 13px;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
}

</style>
</head>


<div id="logincontainer">

<center>

<!-- alert add -->

<div id="user_message1">A</div>
<div id="user_message2">B</div>
<div id="user_message3">C</div>

<!-- end -->

<div id="loginbox">
<table>

    <form action="proses.php" method="POST">
        <tr>
            <td>Login:</td>               
            <td><input size="30px" type="text" name="username" value=""/></td>
        </tr>
        <tr>
            <td>Password:</td>                
            <td><input size="30px" type="password" name="password" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Login"></td>
        </tr>
    </form>
</table>
</div>               

</center>

</div>

</html>

I place all the code that I copied between the mark: <!-- alert add --> and <!-- end -->

The message is suppose to be appearing between A, B, & C letter, but in this case, nothing appears except for that plain letter.

note: I already download and extract the files to my folder eventhough I haven't address it yet, I thought using the online link suppose to work the same way.

Here is the code fixed..

You forgot to include the <body> elements. Also on line 26 and 33 of your code, if you notice you are storing a string for the message. Since there are double quotes around this string, you cannot have double quotes within the string. You need to use single quotes within the string.

See my example below.

<!DOCTYPE HTML>
<html>
<head>

<link id="ui-theme" rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" href="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.css"/>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href= "../css/admin.css" media="screen">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.min.js"></script>
<script src="http://pontikis.github.com/jui_alert/v2.0.0/i18n/en.js"></script>
<script src="index.js"></script>

<script>
$(function() {
  $("#user_message1").jui_alert({
    containerClass: "container1 ui-widget",
    message: "<img src='images/megaphone.png' style='float: left; width: 30px; margin-right: 10px;'>This is a sample message. It will disappear after 6 sec (except you press the pin button)",
    timeout: 6000,
    messageIconClass: ""
  });
  $("#user_message2").jui_alert({
    containerClass: "container2 ui-widget",
    message: "This is a sample message. It will not disappear automatically. More information <a href='http://www.google.com' target='_blank'>here</a>.",
    messageBodyClass: "message2",
    timeout: 0,
    use_effect: {effect_name: "slide", effect_options: {"direction": "left"}, effect_duration: "500"}
  });
  $("#user_message3").jui_alert({
    containerClass: "container3 ui-widget",
    message: "This is a <strong>sample error message</strong>. It will disappear after 3 sec (except you press the pin button)",
    timeout: 3000,
    messageAreaClass: "jui_alert_message_area ui-state-error ui-corner-all",
    messageIconClass: "jui_alert_icon ui-icon ui-icon-alert"
  });
});
</script>

<style>
.container1 {
  width: 40%;
  margin: 20px;
}
.container2 {
  width: 50%;
  margin: 20px;
}
.container3 {
  width: 60%;
  margin: 20px;
}
.message2 {
  font-size: 13px;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
}
</style>

</head>

<body>
<div id="logincontainer">

 <div id="user_message1">A</div>
 <div id="user_message2">B</div>
 <div id="user_message3">C</div>

 <div id="loginbox">

    <form action="proses.php" method="POST">
    <table>
        <tr>
            <td>Login:</td>               
            <td><input size="30px" type="text" name="username" value=""/></td>
        </tr>
        <tr>
            <td>Password:</td>                
            <td><input size="30px" type="password" name="password" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Login"></td>
        </tr>
    </table>
    </form>

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

Thanks. Now, I am trying to include the message box in my code so that the message only appears if I input the wrong password.

index.php

<html>
<head>
<!-- alert add -->
<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.css"/>
<!-- custom classes -->
<link rel="stylesheet" href="index.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/i18n/en.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- end -->


<link href= "../css/admin.css" rel="stylesheet" type="text/css" media="screen">

<script type="text/javascript">
$(function() {

  $("#user_message1").jui_alert({
    containerClass: "container1 ui-widget",
    message: "<img src='images/megaphone.png' style='float: left; width: 30px; margin-right: 10px;'>This is a sample message. It will disappear after 6 sec (except you press the pin button)",
    timeout: 6000,
    messageIconClass: ""
  });

  $("#user_message2").jui_alert({
    containerClass: "container2 ui-widget",
    message: "This is a sample message. It will not disappear automatically. More information <a href='http://www.google.com' target='_blank'>here</a>.",
    messageBodyClass: "message2",
    timeout: 0,
    use_effect: {effect_name: "slide", effect_options: {"direction": "left"}, effect_duration: "500"}
  });

  $("#user_message3").jui_alert({
    containerClass: "container3 ui-widget",
    message: "The login is invalid",
    timeout: 0,
    messageAreaClass: "jui_alert_message_area ui-state-error ui-corner-all",
    messageIconClass: "jui_alert_icon ui-icon ui-icon-alert"
  });

});
</script>

<style>
.container1 {
  width: 40%;
  margin: 20px;
}

.container2 {
  width: 50%;
  margin: 20px;
}

.container3 {
  width: 60%;
  margin: 20px;
}

.message2 {
  font-size: 13px;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
}

</style>
</head>

<?php
ob_start();
include('../includes/koneksi.php');


/* the files */

// username and password sent from form
$username=$_POST['username'];
$password=$_POST['password'];

// To protect MySQL injection (more detail about MySQL injection)
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

$encrypted_password = md5($password);

$sql = "SELECT * FROM user WHERE username='$username' and password='$encrypted_password'" or die(mysql_query);
$result=mysql_query($sql);

// Mysql_num_row is counting table row
$count=mysql_num_rows($result);

echo $count; 
// If result matched $username and $password, table row must be 1 row

if ($count==1){

// Register $myusername, $mypassword and redirect to file "login_success.php"
//session_register("username");
//session_register("password");

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;

header("location:admin.php");
}
else {

?>
<!-- alert add -->

<div id="user_message1">A</div>
<div id="user_message2">B</div>
<div id="user_message3">C</div>

<!-- end -->
<?php
}
?>

<div id="logincontainer">

<center>

<div id="loginbox">
<table>

    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
        <tr>
            <td>Login:</td>               
            <td><input size="30px" type="text" name="username" value=""/></td>
        </tr>
        <tr>
            <td>Password:</td>                
            <td><input size="30px" type="password" name="password" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Login"></td>
        </tr>
    </form>
</table>
</div>               

</center>

</div>

</html>

The problem is:

1) now the message also appears when I first see the login page.

2) Also, if I delete:

<div id="user_message1"></div>
<div id="user_message2"></div>

Then the last message won't appears. Strange. I only want to the last message to appears and let the other two hidden.

I haven't tested your code but if you look carefully at your logic you aren't checking whether the form was submitted when you load that page so of course the first time you load the page, your if condition is going to be false and therefore show the dialog along with your form.

I add the if statement.

index.php

<?php

include('../includes/koneksi.php');

if (@$_POST['submit']) {

/* the files */

// username and password sent from form
$username=$_POST['username'];
$password=$_POST['password'];

// To protect MySQL injection (more detail about MySQL injection)
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

$encrypted_password = md5($password);

$sql = "SELECT * FROM user WHERE username='$username' and password='$encrypted_password'" or die(mysql_query);
$result=mysql_query($sql);

// Mysql_num_row is counting table row
$count=mysql_num_rows($result);

echo $count; 
// If result matched $username and $password, table row must be 1 row

if ($count==1){

// Register $myusername, $mypassword and redirect to file "login_success.php"
//session_register("username");
//session_register("password");

$_SESSION['username'] = $username;
$_SESSION['password'] = $password;

header("location:admin.php");
}
else {

?>
<!-- alert add -->

<div id="user_message1"></div>
<div id="user_message2"></div>
<div id="user_message3"></div>

<!-- end -->
<?php
}

}
?>

<div id="logincontainer">

<center>

<div id="loginbox">
<table>

    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
        <tr>
            <td>Login:</td>               
            <td><input size="30px" type="text" name="username" value=""/></td>
        </tr>
        <tr>
            <td>Password:</td>                
            <td><input size="30px" type="password" name="password" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Login"></td>
        </tr>
    </form>
</table>
</div>               

Now, either I get the password correct or not nothing happen (I remain in the same page).

Ok, so right at this moment, I dont have time to degug your code, but here is the general idea of what i was suggesting...

if (post back)
{
    get posted data;
    perform a db lookup;
    if (authenticated)
    {
        do something;
    }
    else
    {
        user was not authenticated, so show message;
    }

}
else
{
    show login form;
}

That's what I did.

Either I get the password correct or not nothing happen (I remain in the same page). The password only works if I erase: "if (@$_POST['submit']) { "
that code.

(for now I erase the if (post) comment so that I can login temporarily). I also wonder why the message box push my login box down. If I erase the message box manually through the x mark, then my login box start moving upward. I would like it to stay in place.

Set the name attribute to the input field, otherwise the POST array will not receive it and the if statement will fail. This:

<input type="submit" value="Login">

Must be:

<input type="submit" name="submit" value="Login">

Thanks, now my message box disappeared at the beginning of my login.

Just a little bit more: " I also wonder why the message box push my login box down. If I erase the message box manually through the x mark, then my login box start moving upward. I would like it to stay in place."

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.