Ze HTML:
<body ng-app="ReporterApplication" ng-controller="BootstrapController as bootstrap">
<div><% boostrap.user %></div>
<div id="pagePreloader"></div>
<div ng-if="!bootstrap.user.logged" ng-controller="LoginController as login" class='site-wrapper-login'>
<form role="form" name="login" class="form-login">
<div class="logo-wrapper">
<img class="logo" src="/resources/images/logo.png">
<div class="logo-text">
<div class="reporter">Reporter</div>
<div class="application">Internal Application</div>
</div>
</div>
<div class="icon-input large">
<i class="icon fa fa-user"></i>
<input ng-model="login.username" type="text" name="reg_username" class="input-text" id="username" placeholder="Enter Username">
</div>
<div class="icon-input large">
<i class="icon fa fa-lock"></i>
<input ng-model="login.password" type="password" name="reg_password" class="input-text" id="password" placeholder="Enter Password">
</div>
<button class="button full large" ng-click="login.submit()">Login</button>
</form>
</div>
and ze rezpective JS:
Application.controller('LoginController', ['$scope', 'ServerActions', function($scope, ServerActions)
{
console.log('WE LOGIN!');
var login = this;
login.username = "";
login.password = "";
login.submit = function () {
console.log('SUBMIT');
ServerActions.fetchData('login.action', {username: login.username, password: login.password}).then(
function (response) {
console.log('SUBMIT SUCCESS');
}
);
}
}]);
For some reason my submit function doesn't get called. Why is that? What am i doing wrong? Why does god hate me!?!??! Is there something about controllers stacking that interferes with the way i expect the code to work?
<form name=login> this is actually creating a global variable name from your form element, therefore it is conflicting with the name you've given to your controller. Either remove the name from the form:
<div ng-controller="LoginController as login" class='site-wrapper-login'>
<form role="form" class="form-login">
</form>
</div>
Or else rename your controller as variable:
<div ng-controller="LoginController as loginCtrl">
Example Fiddle
Related
i have a dynamic form which lets you add and remove inputs. The issue is what even though it works visually, when submitting the form i wont get the values from inputs created by the JS function. If you need anything else let me know as this is about the last implementation to the website
Any ideas as to why? i leave my code below
The html:
<div class="form-container" id="form-container">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions"><label for="directions">Cooking steps.</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</form>
</div>
</div>
Font end JS
var add_more_fields = document.getElementById("add_more_fields")
var remove_fields = document.getElementById("remove_fields")
var directions_container = document.getElementById('product-directions')
var instruction_list = document.getElementById('instruction-list')
add_more_fields.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'directions[]')
newField.setAttribute('placeholder', 'Add Instruction')
node.appendChild(newField)
instruction_list.appendChild(node)
}
remove_fields.onclick = function () {
var input_tags = instruction_list.getElementsByTagName('li')
if (input_tags.length > 1) {
instruction_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
var ingredient_list = document.getElementById('ingredient-list')
add_more_fields_ingredients.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'Ingredients[]')
newField.setAttribute('placeholder', 'Add Ingredient')
node.appendChild(newField)
ingredient_list.appendChild(node)
}
remove_fields_ingredients.onclick = function () {
var input_tags = ingredient_list.getElementsByTagName('li')
if (input_tags.length > 1) {
ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
your HTML is not valid, form element is not properly closed, move closing form tag outside button container, and form opening tag a level up
this should work, and now you probably need to modify styles and rearrange some elements, so you need to see to it that the form and HTML is valid, and adapt styles accordingly:
<div class="form-container" id="form-container">
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish:
<br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions">
<label for="directions">Cooking steps.</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients">
<label for="Ingredients">Ingredients:</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</div>
</form>
</div>
I'm building a clone of the instagram login page for class and trying to figure out why my login page does not automatically re-direct to the feed (I've saved in another html file) after the correct login information is entered. I've googled several variations of how to write this in javascript but none have worked for me thus far.
My code:
const loginCombos = {
nat: 'natpass',
dog: 'dogpass',
cat: 'catpass',
clown: 'clownpass'
};
function validate() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const userExists = loginCombos.hasOwnProperty(username)
const rightPass = loginCombos[username] === password
if (userExists && rightPass) {
alert('Login Successful');
window.location.replace('/feed.html');
return false;
} else {
alert('Sorry, your username or password was incorrect. Please double-check your login information and try again.')
return false;
}
}
<div class="container">
<div class="box">
<div class="heading"></div>
<form class="login-form" id="login" method="POST">
<div class="field">
<input id="username" type="text" placeholder="Phone number, username, or email"/>
<label for="username">Phone number, username, or email</label>
</div>
<div class="field">
<input id="password" type="password" placeholder="password"/>
<label for="password">Password</label>
</div>
<button class="login-button" title="login" onclick="validate()">Log In</button>
<div class="separator">
<div class="line"></div>
<p>OR</p>
<div class="line"></div>
</div>
<div class="other">
<button class="fb-login-btn" type="button">
<i class="fa fa-facebook-official fb-icon"></i>
<span class="">Log in with Facebook</span>
</button>
<a class="forgot-password" href="#">Forgot password?</a>
</div>
</form>
</div>
<div class="box">
<p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
</div>
</div>
You have to add onsubmit method in form element and make sure add event.preventDefault() method, here i provide you code. Please check what you did mistakes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="heading"></div>
<form class="login-form" id="login" onsubmit="validate(event)">
<div class="field">
<input
id="username"
type="text"
placeholder="Phone number, username, or email"
/>
<label for="username">Phone number, username, or email</label>
</div>
<div class="field">
<input id="password" type="password" placeholder="password" />
<label for="password">Password</label>
</div>
<button class="login-button" title="login">Log In</button>
<div class="separator">
<div class="line"></div>
<p>OR</p>
<div class="line"></div>
</div>
<div class="other">
<button class="fb-login-btn" type="button">
<i class="fa fa-facebook-official fb-icon"></i>
<span class="">Log in with Facebook</span>
</button>
<a class="forgot-password" href="#">Forgot password?</a>
</div>
</form>
</div>
<div class="box">
<p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
script.js
const loginCombos = {
nat: "natpass",
dog: "dogpass",
cat: "catpass",
clown: "clownpass",
};
function validate(event) {
console.log("submit", event);
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const userExists = loginCombos.hasOwnProperty(username);
const rightPass = loginCombos[username] === password;
if (userExists && rightPass) {
alert("Login Successful");
window.location.href = "http://google.com";
} else {
alert(
"Sorry, your username or password was incorrect. Please double-check your login information and try again."
);
}
}
Try assigning direct path like, window.location = ./feed
const loginCombos = {
nat: 'natpass',
dog: 'dogpass',
cat: 'catpass',
clown: 'clownpass'
};
function validate() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const userExists = loginCombos.hasOwnProperty(username)
const rightPass = loginCombos[username] === password
if (userExists && rightPass) {
alert('Login Successful');
window.location = '/feed.html';
return false;
} else {
alert('Sorry, your username or password was incorrect. Please double-check your login information and try again.')
return false;
}
}
<div class="container">
<div class="box">
<div class="heading"></div>
<form class="login-form" id="login" method="POST">
<div class="field">
<input id="username" type="text" placeholder="Phone number, username, or email"/>
<label for="username">Phone number, username, or email</label>
</div>
<div class="field">
<input id="password" type="password" placeholder="password"/>
<label for="password">Password</label>
</div>
<button class="login-button" title="login" onclick="validate()">Log In</button>
<div class="separator">
<div class="line"></div>
<p>OR</p>
<div class="line"></div>
</div>
<div class="other">
<button class="fb-login-btn" type="button">
<i class="fa fa-facebook-official fb-icon"></i>
<span class="">Log in with Facebook</span>
</button>
<a class="forgot-password" href="#">Forgot password?</a>
</div>
</form>
</div>
<div class="box">
<p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
</div>
</div>
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>
I have a Jquery function to activate and deactivate forms based off the current form. When I click on the submit button I can get the value of the activeform on the page load if I have it set to ID, but nothing off the second form. When I set it to class it doesn't seem to load any at all and I get no alert back when I click the submit. My jquery is as such:
<script>
$(document).ready(function() {
var activeform = "register";
$("#loginlink").click(function(e) {
var activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
})
$("#registerlink").click(function(e) {
var activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
})
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
</script>
And the code for my forms:
<p>
<form id="register">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for email><i class="fa fa-envelope"></i> Email</label>
<input class="form-control" type="text" id="email"></div>
<div class="col-xs-4"><i class="fa fa-info-circle" title="You may be notified of delayed or denied payments." data-toggle="tooltip"></i></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for submit><i class="fa fa-info" data-toggle="tooltip" title="By Registering you Agree to be Bound by our Terms of Service"></i></label>
<button type="button" class="btn btn-success form-control" class="submit">Register</button></div>
<div class="col-xs-4"></div>
</div>
</form>
<form id="login" style="display:none;">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<br />
<button type="button" class="btn btn-success form-control" class="submit">Login</button></div>
<div class="col-xs-4"></div>
</div>
</form>
</p>
Login | Register
Last but not least. Here's a fiddle. :)
https://jsfiddle.net/rm6j5da9/2/
You were recreating the activeform variable every time in the click event. remove the var keyword. you already declared that as a global variable inside the document ready scope.
$(function(){
var activeform = "register";
$("#loginlink").click(function(e) {
activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
});
$("#registerlink").click(function(e) {
activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
});
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
Also you need to make sure that you have the submit css class on both the login and register buttons
Here is a working sample
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.