Message box

Question

davy_yg 2 Posting Whiz

10 Years Ago

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:  and

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.

javascript

3 Contributors
8 Replies
289 Views
1 Day Discussion Span
Latest Post 10 Years Ago Latest Post by davy_yg

JorgeM 958 Problem Solver

10 Years Ago

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>

Edited 10 Years Ago by JorgeM

cereal 1,524 Nearly a Senior Poster

10 Years Ago

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">

Reply to this topic

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.

davy_yg 2 Posting Whiz · Answer 1 · 2014-01-30T06:21:53+00:00

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:

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

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 2 · 2014-01-30T12:30:55+00:00

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.

davy_yg 2 Posting Whiz · Answer 3 · 2014-01-30T17:00:33+00:00

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).

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 4 · 2014-01-30T18:26:27+00:00

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;
}

davy_yg 2 Posting Whiz · Answer 5 · 2014-01-31T12:14:18+00:00

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.

davy_yg 2 Posting Whiz · Answer 6 · 2014-01-31T15:11:23+00:00

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."