How to create alert message in bootstrap?

hii Good Morning :slight_smile: FRIENDS :slight_smile:
Can anyone tell how to create alert message in Login Form using BOOTSTRAP
It need is to call alert when I click on Submit button

@shammu, I’ve moved this topic across into the JavaScript forum, as I suspect it’s most likely a better place to obtain the answers you’re looking for.

Is this for debugging or are you using a library to provide a modal dialog box (eg http://lipis.github.io/bootstrap-sweetalert/ )

I’ve putted Bootstrap,but its not working :frowning:
Plz check the code, tell anything is wrong…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Login</title>
            <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
            <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/> 
            <script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
            <script type="text/javascript" src="validation.min.js"></script>
            <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
            <link rel="stylesheet" href="style2.css" type="text/css" />
            <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" rel="stylesheet"></link>
            <script type="text/javascript">
                function validLogin() {
                    var uname = $('#uname').val();
                    var password = $('#password').val();

                    var dataString = 'uname=' + uname + '&password=' + password;
                    $("#flash").show();
                    $("#flash").fadeIn(400).html('<img src="image/loading.gif" />');
                    $.ajax({
                        type: "POST",
                        url: "processed.php",
                        data: dataString,
                        cache: false,
                        success: function (result) {
                            var result = trim(result);
                            $('#alert_success').html(result);
    //                        $("#flash").hide();
    //                        if (result == 'correct') {
    //                            
    ////                            window.location = 'index.php';
    //                        } else {
    //                            $("#errorMessage").html(result);
    //                        }
                        }
                    });
                }

                function trim(str) {
                    var str = str.replace(/^\s+|\s+$/, '');
                    return str;
                }
                $(document).ready(function () {
                    $('.alert-autocloseable-success').hide();

                    $('#autoclosable-btn-success').click(function () {
                        $('#autoclosable-btn-success').prop("disabled", true);
                        $('.alert-autocloseable-success').show();

                        $('.alert-autocloseable-success').delay(5000).fadeOut("slow", function () {
                            // Animation complete.
                            $('#autoclosable-btn-success').prop("disabled", false);
                        });
                    });
                });
            </script>
        </head>
        <body>
            <div class="signin-form">

                <div class="container">
                    <div class="main" >
                        <form class="form-signin" method="post" id="register-form">

                            <h2 class="form-signin-heading">Sign In</h2><hr />

                            <div id="error">
                                <!-- error will be showen here ! -->
                            </div>

                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Username" name="username" id="username" />
                            </div>

                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Password" name="password" id="password" />
                                <span id="check-e"></span>
                            </div>


                            <hr />


                            <div class="form-group"style="margin-left: 100px;">
                                <button type="submit" class="btn btn-info" name="btn-save" id="sub1">Submit</button>
                                <!--  <button type="submit" class="btn btn-default" name="btn-save" id="sub1">
                                      <span class="glyphicon glyphicon-log-in"></span> &nbsp;Submit
                                  </button> -->
                            </div>  
                            <div >
                                <!-- Success messages -->
                                <div id='alert_success' class="alert alert-success alert-autocloseable-success">
                                </div>       
                            </div>
                            <div class="form-group" style="margin-left: 200px; margin-top: -3.5em;">
                                <button type="button" class="btn btn-info" name="submit1" id="sub2" class="button" onclick="location.href = 'signup.html'">New Username</button>
                            </div>  
                    </div>
                    </form>

                </div>

            </div>

            <script src="bootstrap/js/bootstrap.min.js"></script>

        </body>
    </html>

Check this code…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Login</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
        <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/> 
        <script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
        <script type="text/javascript" src="validation.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
        <link rel="stylesheet" href="style2.css" type="text/css" />
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" rel="stylesheet"></link>
        <script type="text/javascript">
            function validLogin() {
                var uname = $('#uname').val();
                var password = $('#password').val();

                var dataString = 'uname=' + uname + '&password=' + password;
                $("#flash").show();
                $("#flash").fadeIn(400).html('<img src="image/loading.gif" />');
                $.ajax({
                    type: "POST",
                    url: "processed.php",
                    data: dataString,
                    cache: false,
                    success: function (result) {
                        var result = trim(result);

//                        $("#flash").hide();
                        if (result == 'correct') {

                            window.location = 'index.php';
                        } else {
//                            $("#errorMessage").html(result);
                            $('#alert_success').html(result);
                        }
                    }
                });
            }

            function trim(str) {
                var str = str.replace(/^\s+|\s+$/, '');
                return str;
            }
            $(document).ready(function () {
                $('.alert-autocloseable-success').hide();

                $('#autoclosable-btn-success').click(function () {
                    $('#autoclosable-btn-success').prop("disabled", true);
                    $('.alert-autocloseable-success').show();

                    $('.alert-autocloseable-success').delay(5000).fadeOut("slow", function () {
                        // Animation complete.
                        $('#autoclosable-btn-success').prop("disabled", false);
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="signin-form">

            <div class="container">
                <div class="main" >
                    <form class="form-signin" method="post" id="register-form">

                        <h2 class="form-signin-heading">Sign In</h2><hr />

                        <div id="error">
                            <!-- error will be showen here ! -->
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Username" name="username" id="username" />
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Password" name="password" id="password" />
                            <span id="check-e"></span>
                        </div>
                        <hr />
                        <div class="form-group"style="margin-left: 100px;">
                            <button type="submit" class="btn btn-info" name="btn-save" id="sub1">Submit</button>
                            <!--  <button type="submit" class="btn btn-default" name="btn-save" id="sub1">
                                  <span class="glyphicon glyphicon-log-in"></span> &nbsp;Submit
                              </button> -->
                        </div>  
                        <div >
                            <!-- Success messages -->
                            <div id='alert_success' class="alert alert-success alert-autocloseable-success">
                            </div>       
                        </div>
                        <div class="form-group" style="margin-left: 200px; margin-top: -3.5em;">
                            <button type="button" class="btn btn-info" name="submit1" id="sub2" class="button" onclick="location.href = 'signup.html'">New Username</button>
                        </div>  
                </div>
                </form>
            </div>
        </div>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

@shammu,

You can format your own code using the </> icon in the toolbar, otherwise it won’t show up for you. Also, you only need to post it once.

i want to display the msg from this page, when i click on button

<?php
session_start();
 include_once 'dbconnect2.php';
$message = array();
if (isset($_POST['username']) && !empty($_POST['username'])) {
    $username = mysql_real_escape_string($_POST['username']);
} else {
    $message[] = 'Please Enter Username';
}

if (isset($_POST['password']) && !empty($_POST['password'])) {
    $password = mysql_real_escape_string($_POST['password']);
} else {
    $message[] = 'Please Enter Password';
}

$countError = count($message);

if ($countError > 0) {
    for ($i = 0; $i < $countError; $i++) {
        echo ucwords($message[$i]) . '<br/><br/>';
    }
} else {
    $query = "select * from master where username='$username' and password='$password'";

    $res = mysql_query($query);
    $checkUser = mysql_num_rows($res);
    if ($checkUser > 0) {
        $_SESSION['LOGIN_STATUS'] = true;
        $_SESSION['UNAME'] = $username;
        echo 'correct';
    } else {
        echo ucwords('Please Enter Correct User Details');
    }
}
?>

Both code is right or tell me plzzzzzz…

Thank u
Plz check the code its wrong or right…

This command and all the others starting mysql_ were removed from PHP in early December last year. You will need to convert those to one of the new alternatives introduced in July 2004 if you want your code to continue to work when PHP is updated on your hosting.

Oh boy. The legacy codes still live today. What version is the bootstrap minified?

"http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css

Sorry, let me rephrase that question again.

What version is the bootstrap minified js file?

Bootstrap 3.3.0

Ok, now that we got that out of the way. What are you trying to do with it? Your OP is very vague. You could be talking about alerting the user when they haven’t typed anything into the text field and I could be thinking that you have a problem with logged the user in using Jquery. Please rephrase your OP so that it is clear what you want.

Hello shammu,
no idea about php code, after verifying the code what i understood is problem with version validator.js files or may be php code problem, i don’t have any php test servers to run this, i google regarding the same i found something simple javascript form validation

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.