How do i display username after login using HTML page

Question

maylynn 0 Newbie Poster

6 Years Ago

Hi all. I need some help.

I want to display username after user has login. I am currently using Visual Studio and Javascript. Not using any PHP page.

What should i do?

This is my home.html page:

<!DOCTYPE html> 
<html> 
<head> 
<!--Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript. For details, see http://go.microsoft.com/fwlink/?LinkID=617521--> 
   <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
   <meta name="format-detection" content="telephone=no"> 
   <meta name="msapplication-tap-highlight" content="no"> 
   <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> 
   <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"> <script src="lib/jquery-1.11.2.min.js"></script> 
   <script src="lib/jquery.mobile-1.4.5.min.js"></script> 
   <script src="lib/jquery.validate.min.js"></script> 
   <script src="scripts/common.js"></script> 
   <script src="scripts/home.js"></script> 
   <title>Reminder Box</title> </head> 

   <body> 
   <div data-role="page" id="front-page"> 
   <div data-role="header" class="header" data-position="fixed" id="header"> </div> 
   <div role="main" class="ui-content" id="main-ui"> 
   <div data-role="content" class="ui-content"> 
   <Center><p>»»——Welcome, <?php echo $_SESSION['name'];?>!——««</p></Center> 
   <Center><h3><b>Medication Reminder Box</b></h3></Center> 
   </div> 
   </div> 
   </div> 
   <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="scripts/platformOverrides.js"></script> 
   <footer data-role="footer" data-position="fixed"> 
   <h4>Copyright 2017</h4> </footer> 

</body> 
</html>

Thanks alot!

android-development html-css javascript

Edited 6 Years Ago by maylynn

2 Contributors
2 Replies
5K Views
17 Hours Discussion Span
Latest Post 6 Years Ago Latest Post by pty

pty 882 Posting Pro

6 Years Ago

Not using any PHP page

var url = serverURL() + "/login.php";

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.

maylynn 0 Newbie Poster · Answer 1 · 2017-11-19T16:30:30+00:00

I wanted to it to display the username at the top corner like "Welcome, [Name]".

Above are my home.html page.

This is my login.js:

(function () {
        "use strict";

        var userid;
        var password;

        $(document).ready(function () {

            $("#LoginForm").validate({
                messages: {
                    txtLogin: "User ID is required",
                    txtPassword: "Password is required",
                },
                focusInvalid: false,
                submitHandler: function () {
                    return false;
                },
                errorPlacement: function (error, element) {

                    error.appendTo(element.parent().parent().after());
                },
            });

            $("#btnLogin").bind("click", function () {
                if ($("#LoginForm").valid()) {
                    login();
                }
            });

            $("#btnNewUser").bind("click", function () {
                window.location = "newuser.html";
            });

            $("#btnIndex").bind("click", function () {
                window.location = "index.html";
            });

        });

        function login() {
            var url = serverURL() + "/login.php";
            var result;

            userid = $("#txtLogin").val();
            password = $("#txtPassword").val();

            var JSONObject = {
                "userid": userid,
                "password": password
            };

            $.ajax({
                url: url,
                type: 'GET',
                data: JSONObject,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function (arr) {
                    _getLoginResult(arr);
                },
                error: function () {
                    validationMsg();
                }
            });
        }

        function _getLoginResult(arr) {
            if (arr[0].result.trim() !== "0") {
                localStorage.setItem("userid", userid);
                localStorage.setItem("password", password);
                validationMsgs("Login OK", "Information", "OK");
                window.location = "home.html";
            }
            else {
                validationMsgs("Error in User ID or Password", "Validation", "Try Again");
            }
        }
})();

This is my common.js:

onmessage = function (event) {

};

// To pop notificiation. 
function validationMsgs(message, title, button) {
    navigator.notification.alert(
        message,
        function () { },
        title,
        button
    );
}

function serverURL() { 
    return "http://mp15.mybitmp.org/pevoli";
} 

function validationMsg() {
    validationMsgs("Unable to connect to server. Please try again later.", "Connection Problem", "OK");
}

function getRadioValue(groupName) {
    var _result;
    try {
        var o_radio_group = document.getElementsByName(groupName);
        for (var a = 0; a < o_radio_group.length; a++) {
            if (o_radio_group[a].checked) {
                _result = o_radio_group[a].value;
                break;
            }
        }
    } catch (e) { }
    return _result;
}

function printheader() {

$("#header").html("<h1>Mr Box</h1>");
$("#header").append("<a href='#' id='btnHome' data-icon='home' class='ui-btn-left'>Home</a> <a href='#' id='btnLogout' data-icon='power' class='ui-btn-right'>Logout</a>");

var navbarstr = "<div data-role='navbar'><ul>";
navbarstr += "<li><a id='btnMe' href='#' data-icon='heart'>Profile</a></li>";

navbarstr += "<li><a id='btnSearch' href='#' data-icon='search'>Search</a></li>";
navbarstr += "<li><a id='btnAboutus' href='#' data-icon='phone'>About Us</a></li>";
navbarstr += "</ul></div>";

var myNavbar = $(navbarstr);
$("#header").append(myNavbar).trigger('create');

$("#btnAboutus").bind("click", function () {
    window.location = "aboutus.html";
});

$("#btnMe").bind("click", function () {
    window.location = "me.html";
});

$("#btnProfile").bind("click", function () {
    window.location = "profile.html";
});

$("#btnSearch").bind("click", function () {
    window.location = "search.html";
});

$("#btnHome").bind("click", function () {
    window.location = "home.html";
});

$("#btnLogout").bind("click", function () {
    localStorage.removeItem("userid");
    localStorage.removeItem("password");
    window.location = "index.html";
});
}

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
        vars[key] = value;
    });
    return vars;
}