So, I have the HTML & CSS code already, but I need to make it so when you click button, it checks the contents of the input boxes and if equal to
Username = damon
Password = password
it lets you redirects to chat.html and if its wrong it does alert("wrong").
(I dont know JavaScript so I'm asking here.)
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="content">
<div class="login">
<h1>Login</h1>
<input placeholder="username" type="text" >
<input placeholder="password" type="password" id="password">
<button type="button" onclick="" id="enter">ENTER</button>
</div>
</div>
</body>
<script src="script/db.js"></script>
<script src="script/main.js"></script>
</html>
db.js is empty and main.js has
function clickHandler() {
if (username === 'damon' && password === 'poop'){
window.location.replace("chat.html");
} else {
alert('Wrong!')
}
}
Hardcoding or doing user login checks on client side is not recommended as anyone can read the source and find out your login credentials.
But just assume that you just wanted to learn and try it out. You may do it like this.
Inline Onclick Function Call:
//this is main.js
function clickHandler() {
if (document.getElementById("username").value === "damon" && document.getElementById("password").value === 'poop'){
console.log("redirect to chat.html");
//window.location.replace("chat.html");
} else {
alert('Wrong!');
}
}
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="content">
<div class="login">
<h1>Login</h1>
<!--Added id="username" to below input-->
<input placeholder="username" id="username" type="text" >
<input placeholder="password" id="password" type="password">
<!--You may use inline onclick to call clickHandler function-->
<button type="button" onclick="clickHandler()" id="enter">ENTER</button>
</div>
</div>
</body>
<script src="script/db.js"></script>
<script src="script/main.js"></script>
</html>
Or you may do it by attaching onclick listener to the button to call function.
Code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container mt-4">
<h1 class="text-left" style="margin-bottom: 50px">Daily Fridge & Freezer Monitoring Record</h1>
<form action="/auth/21-TEMP-01b" method="post" id="form">
<div class="form-group">
<label>Select Fridge Or Freezer</label>
<select class="form-control" id="fridgeFreezer" name="fridge">
<option value="Fridge-1">Fridge 1</option>
<option value="Fridge-2">Fridge 2</option>
</select>
</div>
<div class="form-group fridges Fridge-1">
<h4>Fridge 1</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature-1" name="temperature-1">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments-1" name="comments-1"></textarea>
</div>
<div class="form-group fridges Fridge-2">
<h4>Fridge 2</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature-2" name="temperature-2">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments-2" name="comments-2"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="Fridge-1"){
$(".fridges").not(".Fridge-1").hide();
$(".Fridge-1").show();
}
else if($(this).attr("value")=="Fridge-2"){
$(".fridges").not(".Fridge-2").hide();
$(".Fridge-2").show();
}
else{
$(".fridges").hide();
}
});
})
.change();
var temp1 = document.getElementById('temperature-1');
var form = document.getElementById('form');
form.addEventListener('submit', function(e) {
if(temp1.value === '' || temp1.value == null) {
e.preventDefault()
document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;
alert("temp1 not fully filled")
}
})
});
</script>
</body>
</html>
Idea
I am trying to create form validation.
Running the above code details
You will see when you change the option in the drop down menu - different div element loads up. This is done through the jQuery code in the script.
Option 1
Option 2
Next, Javascript
I will be using Javascript to validate the form.
I only have started out validating the first div element of fridge 1. If value is empty I have an alert saying which input has not been filled.
In this scenario I have cleared out all data from Fridge 1 to run the if statement for the error.
Notice this line of code:
document.querySelector('#fridgeFreezer [value="Fridge-1"]').selected = true;
This re-selects the option to the one has the error.
But when I run it - this happens.
Div element of fridge-2 is still showing? How come is the jQuery not executing ?
You have to trigger a change event if you want the change event listener to execute.
form.addEventListener('submit', function(e) {
if(temp1.value === '' || temp1.value == null) {
e.preventDefault()
$('#fridgeFreezer').val("Fridge-1"); // can be simplified like this
$('#fridgeFreezer').trigger("change"); // important line
alert("temp1 not fully filled")
}
})
I've been trying around for a bit and starting to lose my patience. Why doesn't this work? It meant for an easy school project and that's why it doesn't have to be secure at all, just functional.
I've been awake for almost 24hrs and im sure that it's part of the reason why i cant get it to work :)
<form>
<div class="form-group">
<label for="inputUsername">Användarnamn</label>
<input name="username" type="text" class="form-control" placeholder="Ange användarnamn">
</div>
<div class="form-group">
<label for="inputPassword">Lösenord</label>
<input name="password" type="password" class="form-control" placeholder="Ange lösenord">
</div>
<div class="loginButton">
<button type="submit" class="btn btn-primary" onclick="login(this.form);">Logga In</button>
</div>
</form>
<script>
function login(form){
if(form.username.value == "test") && (form.password.value == "test"){
self.location.href = "medlemmar.html";
}
else{
alert("Felaktigt användarnamn eller lösenord");
return false;
}
}
</script>
You are now submitting a form without an action defined for the form, so probably, it is just refreshing the page.
So one way to solve this would be by changing the type of the button:
<button type="button" class="btn btn-primary" onclick="login(this.form);">Logga In</button>
Furthermore you have an error with the parenthesis in your if statement:
if((form.username.value == "test") && (form.password.value == "test")){
If you fix that, it should work as desired:
function login(form){
if((form.username.value == "test") && (form.password.value == "test")){
self.location.href = "medlemmar.html";
}
else{
alert("Felaktigt användarnamn eller lösenord");
return false;
}
}
<form>
<div class="form-group">
<label for="inputUsername">Användarnamn</label>
<input name="username" type="text" class="form-control" placeholder="Ange användarnamn">
</div>
<div class="form-group">
<label for="inputPassword">Lösenord</label>
<input name="password" type="password" class="form-control" placeholder="Ange lösenord">
</div>
<div class="loginButton">
<button type="button" class="btn btn-primary" onclick="login(this.form);">Logga In</button>
</div>
</form>
enter code here
<html>
<head>
<script type="text/javascript">
var n = prompt("Enter your number here", "type your number here");
n = parselnt(n);
if (NaN(n))
{alert("plese enter number");}
else if (n==0)
alert{("The number is zero");}
else if (n%2)
{alert("the number is odd");}
else
{alert("the number is even");}
</script>
</head>
</body><body>
</html>
122
<html>
<head>
<title>Login Page</title>
</head>
<script language="javascript">
function checke(form)
{
if (form.user.value== "Admin" && form.psrd.value=="Admin")
{
alert("login is sucesfull")
}
else
{
alert("Invalid user id")
}
}
</script>
<body>
<table height="10" width="10" border="1px">
<tr>
<td>
<input type="text" name="user">
</td>
<td>
<input type="password" maxlength="8" name="psrd" >
</td>
</tr>
<table>
</body>
</html>
Try changing the button type to button instead of submit.
I did not try it but i guess that your form always does a submit without getting to a evaluate your login-function. Changing the type will prevent that.
Another way would be to maintain the submit type and call preventDefault() function to avoid that behavior.
I am trying to code a simple login page using JavaScript and PHP to help validate the user input values with the values in a database.
However, my submit button doesn't seem to do anything... it just clears the fields.
Here is my code. There are probably MANY errors in it and I apologize for that... the PHP code I wrote is from a collection of other login pages I found on the web and I only started learning JavaScript a couple days ago...
EDIT: I have updated the code based on the mistakes that you guys pointed out. The log in button now no longer refreshes but instead doesn't do anything. I will try to figure it out or start from scratch since there is so much code that I don't understand, haha.
login.html:
`<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Login</title>
</head>
<body>
<div class="header">
<div class="container">
<h1>Login</h1>
</div>
</div>
<div class="form">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input id="submit" type="submit" class="btn btn-default" value="Log in">
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jQuery.md5.js"></script>
<script src="login.js"></script>
</div>
</body>
</html>'
login.js
$(document).ready(function(){
$("form").on("submit", function(e){
e.preventDefault();{
var username = $('#inputUsername3').val();
var password = $('#inputPassword3').val();
var newPw = $.md5(password);
if (username != "" && password !="") {
$.ajax ({
url: "doLogin.php",
type: "POST",
async: false,
data: "$username="+username+"&password="+newPw,
success: function(result) {
window.open(success.html);
}
});
} else {
alert("Please enter a username and password.");
}
return false;
});
});
doLogin.php:
<?php
$host="localhost";
&username="";
$password="";
$db_name="atasgtsar";
$tbl_name="members";
$connection =
mysqli_connect("$host", "$username", "$password")or die("Unable to connect.");
mysqli_select_db("$db_name");
$myUsername=$_POST['username'];
$myPassword=$_POST['password'];
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysqli_real_escape_string($myusername);
$mypassword = mysqli_real_escape_string($mypassword);
$sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'";
$result=mysqli_query($sql);
$count=mysqli_num_rows($result);
if ($count == 1) {
session_register("myusername");
session_register("mypassword");
}
else {
echo "Wrong username or password.";
}
mysqli_close($connection);
?>
Your fields are cleared as the submit button reloads the page.
Use preventDefault(); to stop the submit from happening as you want to submit the data yourself using ajax.
$("form").on("submit", function(e){
e.preventDefault();
//...
Please do not store passwords as plain text in databases, use password_hash() and password_verify().
The MySQL Version you use is deprecated, please use MySQLi or PDO.
There is no type='username', use 'text'.
You call "check(this.form)" from the submit button, but you already bind the jQuery handler to the submit event using js.
If you want to select elements by there ID in jQuery, instead of input[id=username], use #username
Also, there sure are more mistakes in these codes.
I would always recommend to start with an extremely basic layout, print out all information (in js using console.log or alert and in php using echo) and then go n small steps, until you got your working code.
You read out the wrong input fields in your JS and remove the $ in your data string which will send via post.
Here is the correct version.
$(document).ready(function(){
$("#submit").click(function(){
var username = $('input[id=inputUsername3]').val();
var password = $('input[id=inputPassword3]').val();
var newPw = $.md5(password);
if (username != "" && password !="") {
$.ajax ({
url: "doLogin.php",
type: "POST",
async: false,
data: "username="+username+"&password="+newPw,
success: function(result) {
alert(result)
}
});
}
else {
alert("Please enter a username and password.");
}
return false;
});
});
You have also forget the " on the end of the ID.
<div class="col-sm-10">
<input type="username" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
You have done too many mistakes in HTML and Javascript coding:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Login</title>
</head>
<body>
<div class="header">
<div class="container">
<h1>Login</h1>
</div>
</div>
<div class="form">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input id="submit" type="submit" class="btn btn-default" value="Log in">
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jQuery.md5.js"></script>
<script src="login.js"></script>
</div>
</body>
</html>
Than in your javascript code:
$(document).ready(function(){
$("#submit").click(function(){
var username = $('#inputUsername3').val();
var password = $('#inputUsername3').val();
var newPw = $.md5(password);
if (username != "" && password !="") {
$.ajax ({
url: "doLogin.php",
type: "POST",
async: false,
data: "$username="+username+"&password="+newPw,
success: function(result) {
alert(result)
}
});
}
else {
alert("Please enter a username and password.");
}
return false;
});
});
In the HTML the "tpye" attribute of the input with name "username" should be "text" and you've forgot to close the quotes after the "id" attribute:
<input type="text" class="form-control" id="inputUsername3" name="username" placeholder="Username">
In your Javascript it seems like you use jQuery but I dont see where you include the library.
The javascript selectors for IDs should be defined like this:
var username = $('#inputUsername3').val();
var password = $('#inputPassword3').val();
Keep in mind that there could be more things that I haven't notice.
The browser automatically posts your data when you click in an submit button that is inside your form, what you have to do is to prevent this default behaviour so that it actually uses your JS code.
change
$("#submit").click(function(){
for
$("form").on("submit", function(e){
e.preventDefault();
Your fields are beeing cleared because your button is a submit button and because you are not redirecting the client to any other page, it refreshes it. From what I see you want to use AJAX, try to use just a simple button with a onclick event (type="button").
Im having a small problem with my code and i was wondering if someone could explain what i am doeing wrong.
The first textbox should get focus when the page is loaded but that doesnt seem to work either.
The code underneath should jump from 1 textbox to another when the the first textbox reaches a specific number of characters.
The second textbox should submit the form after the textbox reaches a specific number of characters.
So i know the functions check() and submit() dont work,
But i cannot figure out what the problem is.
Can someone help me?
<head>
<!-- Include the needed files-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script language="javascript">
function check() {
var inhoud = document.formsubmit.locatienummer.value.length + 1;
if (inhoud <= 10)
{ document.formsubmit.locatienummer.focus() }
else
{ document.formsubmit.bonnummer.focus() }
}
<!-- This code makes the form submit -->
function submit() {
var inhoud2 = document.bonnummer.value.length + 1;
if (inhoud2 <= 10)
{ document.formsubmit.bonnummer.focus() }
else
{ document.formsubmit.submit() }
}
</script>
</head>
<body onload="document.formsubmit.locatienummer.focus()">
<div class="wrapper">
<fieldset>
<legend>Locatiescanner</legend>
<br />
<form name="formsubmit" method="POST">
Locatienummer:
<br />
<input type="text" name="locatienummer" onkeyup="check()"><br />
Bonnummer:
<br />
<input type="text" name="bonnummer" onkeyup="submit()"><br />
</form>
</fieldset>
</div>
</body>
</html>
You forgot the equals sign
<form name"formsubmit" method="POST">
/
<form name="formsubmit" method="POST">
Your HTML is invalid try this
<div class="wrapper">
<fieldset>
<legend>Locatiescanner</legend><br/>
<form name="formsubmit" method="POST">
Locatienummer: <br/>
<input type="text" name="locatienummer" onKeyUp="check()"/><br/>
Bonnummer: <br/>
<input type="text" name="bonnummer" onKeyUp="submit()"/><br/>
</form>
</fieldset>
</div>
You forgot the = sign from <form name"formsubmit" method="POST">
and you didn't end the input element