I'm trying to set up a login form who redirects the user to another page after submitting the form. However neither window.location.replace(), window.location.href, or window.open() seem to work and I can't figure out why. I checked on the developer tools and it gives me no error.
Here's the javascript:
function loginUtente(){
var email = document.getElementById('loginemail').value;
var password = document.getElementById('loginpassword').value;
var utente = localStorage.getItem(email);
if( utente != null && JSON.parse(utente).password == password){
window.alert("login effettuato!");
window.location.replace("http:/www.google.it");
}
else{
window.alert("Utente o password non corretti");
}
return false;
}
And here's the HTML:
<form class="form-group" id="formlogin" onsubmit="loginUtente()">
<label>Email</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input id="loginemail" type="text" name="nome" class="form-control" placeholder="Indirizzo Email" required ></input>
</div>
<br>
<label>Password</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input id="loginpassword" type="password" name="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" ><span class="glyphicon glyphicon-send" ></span> Login</button>
</form>
Putting the return false inside the if is not working either.
The Google url is of course a placeholder url.
In the form tag you missed to add return statement :
<form class="form-group" id="formlogin" onsubmit="return loginUtente()">
So, form is submitted without waiting for response of function. and function code is not executed.
Related
I am trying to use bootstrap spinner to load upon button click while flask is processing the request but it's not working.
When I click the button, the request is sent to flask and it never gets to the javascript part for some reason.
To confirm that, I tried the same HTML code below on a separate HTML page and it worked.
So my question is: how to make the javascript code work in conjunction with the request being sent to flask as well.
the HTML and Javascript part goes this way:
<div class="container-fluid mt-3">
<p class="font-weight-bold">Deactivate User</p>
<br>
<form action="{{ url_for('deactivate_user')}}" method='POST'>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
</div>
<button type="submit" id="submit" class="btn btn-info btn-primary">Submit</button>
</form>
</div>
<script>
$('#submit').click(function () {
this.form.submit();
this.disabled = true;
this.html = '<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>'
});
</script>
Am I doing something wrong? I am pretty new to HTML so excuse my ignorance in advance.
You can use ajax
<div class="container-fluid mt-3">
<p class="font-weight-bold">Deactivate User</p>
<br />
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input
type="text"
class="form-control"
placeholder="Username"
id="username"
name="username"
required
/>
</div>
<button id="submit" class="btn btn-info btn-primary">
Submit
</button>
</div>
</div>
Then
<script>
$('#submit').click(function (d) {
let username = $('#username').val();
$.post(
"url_for_deactivate_user",
{
username: username,
},
function (data, status) {
// if (data) { // validate response data here
this.disabled = true;
this.html = `<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>
`;
// }
}
);
});
</script>
NOTE: Make sure you replace url_for_deactivate_user properly and also that your server gives a response.
When i load login.jsp it doesn't alert if i dont input password or username
tried checking wether i correctly attached the file but it still doesnt work for me, what could be the reason?jsp just reacts the way it would react if i wouldn't use js at all
LoginPage.js
function check()
{
var username = document.form.username.value;
var password = document.form.password.value;
if (username==null || username=="")
{
alert("Username can't be blank");
return false;
}
else if(password==null||password=="")
{
alert("Password must be inserted ");
return false;
}
}
my jsp:
<body>
<div class="card-body">
<form method="get" action="LoginServlet" onsubmit="return check()">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input id="username" type="text" class="form-control" placeholder="username" name="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input id="password" type="password" class="form-control" placeholder="password" name="password">
</div>
<div class="form-group">
<input id="login-button" type="submit" value="Login" class="btn float-right login_btn" >
</div>
</form>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center links">
Don't have an account?Sign Up
</div>
</div>
</div>
</div>
</div>
<script src="LoginPage.js"></script>
</body>
</html>
any suggestions ?
firstly check the HTML syntax of your jsp, it seems that the html is broken because of the last three </div> because of the missing opening tags.
Then, you don't have by default a document.form property so you could get your username and password in the following way:
// or you can use document.getElementById('username')
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
here details about the querySelector function
I want to create login form, and then the result is going to another page, using js to catch the value and create the process.
I have success created it using onclick, but I want to change onclick to onsubmit as I don't want to click the button, just press 'Enter' keyboard, the process is working. I have tried change from onclick to onsubmit process, but I still not get the value on the js page.
Here's the login form
<form >
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
</div>
</form>
<script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>
Here's the js page
function login()
{
var phone_number = $('#phone_number').val();
var password = $('#password').val();
console.log(phone_number)
}
I have changed the onclick to onsubmit, but I can't get the value on the js page again.
here's my change
<form id="myform" onsubmit="login()">
......
<div class="form-group">
<input type="submit" value="Submit" class="btn float-justify login_btn">
</div>
Do you know where's the error on my code ?
Thank you
As I see it , everything is good , where should be looking now on 2 things
first its jquery you are using but i can not see its link
second check your base url , it is properly being generated or not
Below you can see its working on onclick
same way you can do with on submit but you have to pass event in function so that you can stop its default action . you can do that using event.preventDefault();
function login(e)
{
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();
alert(phone_number)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-justify login_btn" >
</div>
</form>
I've downloaded a template form to sign in with bootstrap. When I try to get the value from the email or password field nothing happens.
the from looks like this
<form class="form-signin">
<img class="mb-4" src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button onclick="autentica()" class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
</form>
and the function I'm trying to use looks like this:
<script>
function autentica(){
var mail = document.getElementById("inputEmail").value();
alert(mail);
if(document.getElementById("inputEmail").value() == "admin#admin.cl" && document.getElementById("inputPassword").value() == "admin"){
document.location.href= "dashboard.html";
}
}
</script>
Neither the alert nor the changing page works.
The "dashboard.html" file is on the same folder.
Thanks in advance.
There is no function value(), but it's a (string) property value. So the correct syntax would be: var mail = document.getElementById("inputEmail").value;
I have a validation in my form for email. If the user is already registered, it shows the alert and resets the form with null value. I need the alert message as well as data should retain in the form.
Thanks in advance.
https://plnkr.co/edit/WhdRmJmLs69yaf6Q2uYI?p=preview
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name:</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="firstName" ng-disabled="!edit" name="firstName" ng-model="user.firstName" ng-required="true">
<span style="color:red" ng-show="userForm.myName.$touched && userForm.myName.$invalid">Please enter a First Name</span>
</div>
<label class="control-label col-sm-2">Email:</label>
<div class="col-xs-4"><input type="email" id="email" class="form-control" ng-disabled="!edit" name="email" ng-model="user.email" ng-required="true">
<span style="color:red" ng-show="userForm.email.$touched && userForm.email.$invalid">Please enter valid email ID</span>
</div>
</div>
<div class="panel-footer">
<button type="button" ng-click='edit=!edit'id="Edit" ng-show="!edit" class="btn btn-default" >Edit</button>
<button ng-show="edit" id="save" type="submit" ng-click='addOrModifyUser(user)' class="btn btn-default"
ng-disabled="userForm.$invalid">Save
</button>
<a ng-if="user.accountId" ui-sref="account.locations.contacts({accountId: user.accountId})">
<button type="type" class="btn btn-default">Cancel</button>
</a>
</div>
I?p=preview
Don't know exactly what your problem is here but this is how I would have solved a custom email validation check in angular 1.x.
Html:
<form ng-submit="submit()">
<input type="email" class="form-control" id="email" name="email" placeholder="email" ng-model="formModel.email" />
<span ng-show="formModel.$submitted && formModel.teamName.$error.exists">Email already exists</span>
</form>
Js: (in your angular controller) where "EmailService" would be your http service of choice that checks if email exists against your backend:
myApp.controller('mainController', function($scope, EmailService) {
$scope.submit = function() {
$scope.formModel.email.$setValidity("exists", true);
EmailService.emailExist($scope.formModel.email, { // check if email exists
success: function(exists) {
$scope.$apply(function(){
$scope.formModel.email.$setValidity("exists", !exists); // set validation flag
});
if($scope.formModel.$valid) {
// submit if valid
}
}
}
}
}
Good luck!