here's my login page code :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="C:\Users\Si Mohamed\Desktop\projects\game shop\jv.js">
</script>
<title>E-keys Store</title>
</head>
<script>
function verify() {
var usrname = document.getElementById("usrname").values;
var pass = document.getElementById("pass").values;
if (usrname2 == usrname && pass2 == pass) {
alert("logged in successfully");
}else {
alert("account doesnt exist");
}
}
</script>
<body>
<form class="sign" action="index.html" method="post">
<div class="sign_in">
<p class="title">SIGN IN</p>
<p class="mailtitle">Email or Username <br><input class="inp1" type="text" name="Username"
id="usrname2" value=""></p>
<p class="passtitle">Password<br><input type="password" name="Password" id="pass2"
class="inp2"></p>
<input type="checkbox" class="check1">
<div class="txt1">Remember</div>
<div class="txt2">Me</div>
<img src="signinbtn.svg" class="signinbtn" onclick="verify();" >
<a href="http://127.0.0.1:3000/Sign%20Up/index2.html" class="link1"><p>You don't have an
account? Sign up </p></a>
<a href="" class="link2"><p>Forgot your password?</p></a>
</div>
</form>
<aside class="bg">
<img src="bgblue.svg">
</aside>
</body>
</html>
and here's my code for the js linked to both login and sign up page :
var mydb = openDatabase("accounts", "0.1", "Testing Database", 1024 * 1024);
if (window.openDatabase) {
//create the table using SQL for the database using a transaction
mydb.transaction(function(t) {
t.executeSql("CREATE TABLE IF NOT EXISTS mydb (id INTEGER PRIMARY KEY, mailusr VARCHAR(50),
usrname VARCHAR(50), pass VARCHAR(100))");
});
} else {
alert("WebSQL is not supported by your browser!");
}
//function to output the list of cars in the database
function updateDrafts(transaction, results) {
//initialise the listitems variable
var listitems = "";
//get the list holder ul
var listholder = document.getElementById("drafts");
//clear the list of drafts ul
listholder.innerHTML = "";
var i;
//Iterate through the results
for (i = 0; i < results.rows.length; i++) {
//Get the current row from database
var row = results.rows.item(i);
listholder.innerHTML += "<li>" + row.mailusr + " - " + row.usrname + " - " + row.pass + "(<a
href='javascript:void(0);' onclick='deleteDraft(" + row.id + ");'>Delete this account</a>)";
}
}
//function to get the list of accounts from the database
function outputDrafts() {
//check to ensure the mydb object has been created
if (mydb) {
mydb.transaction(function(t) {
t.executeSql("SELECT * FROM mydb", [], updateDrafts);
});
} else {
alert("db not found, your browser does not support web sql!");
}
}
//function to add account
function addDraft() {
//check to ensure the mydb object has been created
if (mydb) {
//get the values of user and pass text inputs
var mailusr = document.getElementById("mailusr").value;
var usrname = document.getElementById("usrname").value;
var pass = document.getElementById("pass").value;
var pass1 = document.getElementById("pass1").value;
//Test to ensure that the user has filled all the form
if (mailusr !== "" && usrname !== "" && pass !== "" && pass == pass1) {
//Insert the user entered details into database
mydb.transaction(function(t) {
t.executeSql("INSERT INTO mydb (mailusr, usrname, pass) VALUES (?, ?, ?)", [mailusr, usrname,
pass]);
outputDrafts();
});
} else if (mailusr !== "" && usrname !== "" && pass !== "" && pass !== pass1) {
alert("Your password does not match with your confirmation");
}
else{
alert("You need to fill all fields");
}
}}
var link = document.getElementById("adduser");
link.onclick = function () { alert(1)
addDraft();
};
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).log );
}
}, null);
});
i can't somehow extract value by id in login page it said index.html:12 Uncaught TypeError: Cannot read property 'values' of null at verify (index.html:12) ! i need to manage somehow to get the database details like username and password to verify if the account of the user or not in the database created in sign up page thanks in advance. Im a beginner in javascript and websql :D .
There are a few issues in your code:
id="usrname2" and id="pass2" but your JavaScript calls forgetElementById("usrname") and getElementById("pass") These elements simply don't exist. Change the Id of your fields and it will return valuesopenDatabase before you actually check if it is available, you might want to swap the linesGood luck