[SOLVED] How to match credentails using XML on login HTML page?

Issue

Locally I am trying to match the login credentails using the XML page which will act like database. If the login credentails matches, it must proceed to next page which will be new HTML page containing something. Here’s what I have till now in HTML & XML page. I did the validation using the JavaScript and hard coded for one user. In XML if I have say 10 users then how do I do?

<html>
<head><title>Login page</title></head>
<body>

<div align="right">
<h1 style="font-family:Times New Roman;text-align="center";font-size:20pt;
color:#00FF00;>
Welcome to Login Page
</h1>
<form name="login">
Username: &nbsp <input type="text" name="userid"/><br><br>
Password:  &nbsp  <input type="password" name="paasword"/><br><br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "user1" && form.password.value == "pass1")
{
window.open('success.html')/*opens the target page while Id & password matches*/
}
else
{
alert("wrong Username or Password")/*displays error message*/
}
}
</script>
</div>
</body>
</html>

XML code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<student>

<details>
<username>user1</username>
<password>pass1</password>
<email>[email protected]</email>
</details>

<details>
<username>user2</username>
<password>pass2</password>
<email>[email protected]</email>
</details>

<details>
<username>user3</username>
<password>pass3</password>
<email>[email protected]</email>
</details>

<details>
<username>user4</username>
<password>pass4</password>
<email>[email protected]</email>
</details>

</student>

Solution

You can use jQuery and do something like this..

<html>
<head><title>Login page</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
   $(document).ready(function(){
   var xml;
  $('#b1').click(function(){
       $.get('users.xml', null, function (data, textStatus) {
           xml=data;
            $(xml).find('details').each( function(){
                var item = $(this);

                if(item.find('username').text()==$('#userid').val() && item.find('password').text()==$('#pwd').val())
                {
                    window.open('success.html');
                }
           });
        });
    });
});
    </script>
<body>
<div align="right">
<h1> Welcome to Login Page </h1>
Username: &nbsp <input type="text" id="userid" name="userid"/><br><br>
Password:  &nbsp  <input type="password" id="pwd" name="paasword"/><br><br>
<input type="button" id="b1" value="Login"/>
<input type="reset" value="Cancel"/>
</div>
</body>
</html>

Answered By – Bharath R

Answer Checked By – Candace Johnson (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published.