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.
In my angularJS project I'm getting below error. Can you please help me?
Error
angular.min.js:117Error: [$parse:syntax] http://errors.angularjs.org/1.5.6/$parse/syntax?p0=Shoping&p1=is%20an%20unexpected%20token&p2=8&p3=Online%20Shoping%20-%20login&p4=Shoping%20-%20login
at Error (native)
at localhost:8082/onlineshopping/angular.min.js:6:412
at Object.s.throwError (localhost:8082/onlineshopping/angular.min.js:228:143)
at Object.s.ast (localhost:8082/onlineshopping/angular.min.js:220:47)
at Object.td.compile (localhost:8082/onlineshopping/angular.min.js:229:420)
at kc.parse (localhost:8082/onlineshopping/angular.min.js:258:213)
at g (localhost:8082/onlineshopping/angular.min.js:125:278)
at k (localhost:8082/onlineshopping/angular.min.js:105:129)
at $ (localhost:8082/onlineshopping/angular.min.js:77:397)
at $b (localhost:8082/onlineshopping/angular.min.js:61:398)
My HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping - Login Page</title>
<script src="angular.min.js"></script>
<!-- <link rel="stylesheet" href=".\WEB-INF\lib\css\Styles.css"/> -->
</head>
<body ng-app>
<div style="text-align:center">
<h1>{{Online Shoping - login}}</h1>
<form action="login_submit" name="login" method="get">
Email Address: <input type="email" placeholder="username#mail.com" required/><br><br>
Password: <input type="password" placeholder="password" required/><br><br><br>
<input type="submit" value="Login"/>
</form>
</div>
</body>
</html>
you just need to update the <h1></h1> tage like
<h1>Online Shoping - {{login}}</h1>
or you can also use <h1></h1> like
{{'Online Shopping - '+ login}}
for more details click fiddler link here
This is wrong {{Online Shoping - login}} because Online Shoping is not a value nor valid syntax. You can use a string and concatenate the value:
{{'Online Shopping - '+ login}}
Or simply interpolate where needed only:
<h1>Online Shopping - {{login}}</h1>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="login.css"> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head>
<body ng-app="loginApp">
<div class="container">
<div class="login_logo">
</div>
<div class="form_container" ng-controller="loginCtrl" >
<div class="error_msg" ng-if="form_login.username.$dirty" ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">Username and password are required</div>
</div>
<div class="form_left">
<form class="form_login" name="form_login" ng-submit="submitForm()" novalidate>
<div class="usr"><input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required /></div>
<div class="psw"><input id="password" name="password" ng-model="password" type="password" required /></div>
</form>
</div>
<div class="form_right">
<a class="submit" href="" ng-click="submitForm()">submit</a>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
var app=angular.module("loginApp",["ngMessages"]);
app.controller("loginCtrl", function($scope){
$scope.username = "";
$scope.password = "";
$scope.submitForm=function(){
};
});
</script>
</body>
</html>
Now I have a login page as it shows above, I'm trying to do the validation with ngMessages
If I have to use <a> which is outside of form to submit it instead of button, how should I do?
How can I make sure error messages are displayed when username or password is empty, and only after user submit the form.
How to prevent user from resubmitting form with <a>?
To show error messages only after form submit, add a variable '$scope.submitted = true;'.
In order to prevent re-submit submit button can be disabled.
Please refer following link for detailed explanation.
https://scotch.io/tutorials/angularjs-form-validation
Hope it helps.
You can check the validation result in your controller function with:
if ($scope.form_login.$valid) {
...
}
The form in angularjs will be validated auto. For all form members you can check the doc
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").
I am new to angular js. please help me with the below issue
I have a form with a controller loginController. I have two text boxes user.email and user.password.
I want to post the data to servlet onclick of the Log in button.
I have written the following code, but when i click Log in, the data is not getting posted on to the server. Also there is no error message.
Below is my JSP file
`
<html ng-app="practiceApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel ="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="practice.js"></script>
<form name='login' ng-controller='loginController' ng-submit="login()">
<div>
{{hello}}
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required/>
<span ng-show='login.email.$dirty && login.email.$error.required'>Required</span>
<span ng-show='login.email.$dirty && login.email.$error.email'>Not a valid email</span>
<label>Password</label>
<input type="password" name="password" ng-model="user.password" required/><br/>
<span ng-show='login.password.$dirty && login.password.$error.required'>Required</span>
<button ng-disabled="login.$invalid">Log in</button>
</div>
</form>
</body>
</html>
`
JavaScript File
`
var app = angular.module('practiceApp',[]);
app.controller('loginController',function($scope,$http){
$scope.login = function(){
$http({
method: 'POST',
url:'/login',
headers:{'Content-Type':'application/json'},
data:$scope.user
}).success(function(data){
$scope.status=data;
});
}
});
`
I have tried all the solutions that are available but couldn't find any result.. Kindly help on this
Your <button> does not cause the form to submit. Change to <input type="submit" ng-disabled="login.$invalid">Log in</button> or remove ng-submit from the form and add ng-click="login()" to the <button>.