How to stop event propagation in AngularJS - javascript

When i am clicking on the "Sign Up" button, it is also going to the handler of "login" button. I have used $event.stopPropagation() for "Sign Up" button to avoid it, but it is not working.
The code -
<form role="form" ng-submit="login(userName, password)" class="form-horizontal">
<div class="form-group">
<label for="usrNm" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" id="usrNm" ng-model="userName" class="form-control input-lg" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" id="pwd" ng-model="password" class="form-control input-lg" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default">LOGIN</button>
<button class="btn" ng-click="register(); $event.stopPropagation();">SIGN UP</button>
</div>
</div>
</form>
controller.js -
expmodule.controller('loginForm', function($scope, sharedProperties) {
var auth;
$scope.login = function (userid, password) {
auth = sharedProperties.session.isAuthenticated(userid, password);
if (auth) {
alert("Welcome "+userid);
window.location = "home.html";
} else {
alert("Invalid Login");
}
}
$scope.register = function () {
window.location = "register.html";
}
});

The default behaviour for <button>s is to submit the form they are part of.
Change your code to this:
<button class="btn btn-default">LOGIN</button>
<button type="button" class="btn" ng-click="register();">SIGN UP</button>

Related

Parameter is not passed to the function on ng-submit

I have a function reset(username) that outputs whatever is entered into the input field of ng-model="username". Why is it not appearing in console though?
This is my function
$scope.reset = function (username) {
console.log(username);
};
and the way I submit the form
<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
Controller as requested
app.controller("ResetController", function ($scope) {
$scope.username='';
$scope.reset = function (username) {
console.log('username = ', username);
};
});
I believe you do have the ng-app and everything else besides this form, however it is better handled by the DOM if you manipulate your inputs as properties of an object and not directly as $scope. properties. See answers to this here. And note in the code how I attached username to $scope.object.username
var app = angular.module('myApp',[])
app.controller('ResetController',['$scope',function($scope){
$scope.object = {};
$scope.reset = function(username){
console.log(username);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="object.username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
</div>

Javascript fail to redirect after firebase authentication

I'm authenticating users registered in my firebase database and i want to redirect the user after successful authentication
const txtEmail = document.getElementById('email');
const txtPass = document.getElementById('password');
const loginBtn= document.getElementById('reg');
loginBtn.addEventListener('click', e => {
const mail = txtEmail.value;
const pass = txtPass.value;
const auth = firebase.auth();
const promise = auth.signInWithEmailAndPassword(mail, pass);
if(promise){
window.location = "{{ route('users') }}";
console.log("{{ route('users') }}");
}else{
}
});
the log is successfully printed but the redirection fails may someone help
this is my form i don't know but maybe there is something wrong in it
<form class="form-horizontal m-t-20" method="post">
{{ csrf_field() }}
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required="" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" id="password" required="" name="password" placeholder="Password">
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox-signup" type="checkbox">
<label for="checkbox-signup">
Remember me
</label>
</div>
</div>
</div>
<div class="form-group text-center m-t-30">
<div class="col-xs-12">
<button class="btn btn-custom btn-bordred btn-block waves-effect waves-light" class="reg" id="reg">
Login
</button>
</div>
</div>
<div class="form-group m-t-30 m-b-0">
<div class="col-sm-12">
<i class="fa fa-lock m-r-5"></i> Forgot your password?
</div>
</div>
</form>

angularjs 2 forms one page, one works, the other doesn't

I have no idea what I have done here.
I have this view:
<div class="row" ng-if="!controller.showLoginForm">
<div class="col-md-4 col-md-offset-4">
<form name="registerForm" ng-submit="controller.register(registerForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error': registerForm.email.$invalid && !registerForm.email.$pristine }">
<label class="control-label">Email</label>
<input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
<p ng-show="registerForm.email.$invalid && !registerForm.email.$pristine" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group">
<button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="registerForm.$invalid">Register</button>
</div>
</form>
<pre>{{ controller.model | json }}</pre>
</div>
</div>
<div class="row" ng-if="controller.showLoginForm">
<div class="col-md-4 col-md-offset-4">
<form name="form" ng-submit="controller.login(form.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error': form.email.$invalid && !form.email.$pristine }">
<label class="control-label">Email</label>
<input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
<p ng-show="form.email.$invalid && !form.email.$pristine" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.password.$pristine }">
<label class="control-label">Password</label>
<input class="form-control" name="password" type="password" ng-model="controller.model.password" ng-minlength="8" required />
<p ng-show="form.password.$error.minlength" class="help-block">Password is too short.</p>
</div>
<div class="form-group">
<button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="form.$invalid">Login</button>
</div>
</form>
<pre>{{ controller.model | json }}</pre>
</div>
</div>
The issue with this is that the login form works fine....validation and all...but the register form doesn't work at all.
ng-submit does nothing, none of the ng-class fire and ng-disabled doesn't work.
The controller looks like this:
(function () {
'use strict';
angular.module('widget.directives').controller('PkAuthenticateController', PkAuthenticateController);
PkAuthenticateController.$inject = ['pkAuthenticateService'];
function PkAuthenticateController(pkAuthenticateService) {
var self = this;
// Bindings
self.model = { email: '' };
self.showLoginForm = pkAuthenticateService.hasLogin;
// Method binding
self.register = register;
self.login = login;
//////////////////////////////////////////////////
function register(valid) {
if (valid) {
return pkAuthenticateService.register(self.model);
}
};
function login(valid) {
if (valid) {
return pkAuthenticateService.login(self.model);
}
};
};
})();
Can anyone spot what I have done wrong?

How to make a second submit button?

I have a classic form that submits data to a controller. Nothing special until here.
The thing is I want a second button, let's say "Save and Exit" that I want to also submit and redirect to home page.
How could I do that? I guess this includes a little javascript for checking?
I just can't wrap my head around it. Thank you!
<form method="POST" action="link/here" id="main_form" class="form-horizontal">
<input name="_token" value="JDtRMqc4aRFlK4QFzDPRTxKvNxIj5EnoLOceOUBT" type="hidden">
<div class="box-body">
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Figura</label>
<div class="col-sm-9">
<input class="form-control" id="Figura" name="figura" placeholder="Figura" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Parcela</label>
<div class="col-sm-9">
<input class="form-control" id="Parcela" name="parcela" placeholder="Parcela" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Rand</label>
<div class="col-sm-9">
<input class="form-control" id="Rand" name="rand" placeholder="Rand" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Nr. Locuri</label>
<div class="col-sm-9">
<input class="form-control" id="Locuri" name="locuri" placeholder="Locuri" value="" type="text">
</div>
</div>
<div id="locuri_div" class="col-sm-offset-1"></div>
<div class="pull-right">
<button type="submit" class="btn btn-success">Salveaza</button>
</div>
<div class="pull-left">
Inapoi
</div>
</div>
<!-- /.box-body -->
</form>
your current button :
<button type="submit" name="check" value="0" class="btn btn-success">Save</button>
add a new one:
<button type="submit" name="check" value="1" class="btn btn-success">Save and Exit</button>
then in your save.php do:
if($_POST['check'] == 0){
//redirect to page
}
else{
//redirect to home
}
Give each button a name and a value. In your controller (client-side JS is the wrong tool for this), test the name and then redirect based on that.
For example:
<button name="action" value="save">Save</button>
<button name="action" value="save_and_go_home">Save & Go Home</button>
And then (to use expressjs as an example):
app.post('/here', function (req, res) {
// Do everything else you want to do with the data
// Then
var action = req.body.action;
if (action === "save_and_go_home") {
res.redirect("/");
} else {
res.send('Whatever you were sending before')
}
});

Cannot /Post - Login Authentication

I am creating an app and I need a SignIn / SignUp functionality for the same. Here is my SignIn HTML:
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form action="verifySignin" method="post" id="verifySignin" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username" required="" autofocus="" >
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button class="btn btn-md btn-primary btn-block" type="submit">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > Don't have an account?
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
My app.js has the following to route:
app.post('/verifySignin', home.verifySignin);
app.get('/verifySignin', home.verifySignin);
Under routes folder> I have created a home.js file which contains the following:
function verifySignin(req,res)
{
req.session.name=req.param("username");
var password = req.param("password");
console.log("session name:"+req.session.name);
var verifyUserQuery="select username, password from Users where Username='"+req.param("username")+"' and Password = '"+req.param("password")+"'";
mysql.fetchData(function(err,results){
if(err){
throw err;
}
else
{
if(results.username==req.param("username") && results.password == password){
res.render('kanban', { name: req.param("username") });}
else {
res.render('ErrorPage');
}
}
},verifyUserQuery);
}
exports.verifySignin=verifySignin;
When I click on the Login button, I get the error : Cannot POST /verifySignin.
Any help would really be appreciated. Thanks.
Try to use it like,
var users = require('./home/users');
in addition, this is a very bad practice due to security concerns
"select username, password from Users where Username='"+req.param("username")+"' and Password = '"+req.param("password")+"'"
pass values as parameters or bind them.

Categories