So i have a log in page, there is a form and what i wanna do is when the user enters their username and password, it checks it in an object (ik i should do it in backend but stay with me here) but the jquery function is not working. here is the code.
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$('#but').click(function() {
alert("lol");
});
</script>
what do i neeed to fix in order for the jquery function to work?
What do you mean 'it checks it in an object'? Do you want to grab the username & password when a user clicks the button? If so then you'd do something like this:
$('#but').click(function() {
var username=$('input[name=u]').val();
var password = $('input[name=p]').val();
// Do checks with the values here e.g send to server for validation
});
Adding jquery in the script. Also you may write the jquery functions in $(document).ready() or $(function(){}) but it as optional as long as your write your script after the element it is trying to access.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="ID" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<button id="but" type="submit" class="btn btn-primary btn-block btn-large">Enter Workspace</button>
</form>
</div>
<script>
$(function(){
$('#but').click(function() {
alert("lol");
});
})
</script>
Related
I'm building a wireframe of a Chrome Extension. In short, I want to make three separate screens and I'm going to have form elements on each one. For each, I just want to hide/show one of the other forms for now. So I'm adding a function to the first form, which should hide it. Console shows no errors, but nothing happens onClick:
Form:
<div id="step1" class="login">
<h1>Login</h1>
<form>
<input type="text" name="u" placeholder="Username" required="required" />
<input type="password" name="p" placeholder="Password" required="required" />
<input type="button" id="loginbtn" class="btn btn-primary btn-block btn-large" value="Log In">
</form>
</div>
JavaScript:
var el = document.getElementById('loginbtn');
if(el){
el.addEventListener('click', login, false);
}
function login() {
document.getElementById('step1').style.display = 'none';
}
I'm trying to get the div containing the login form to disappear when clicking the "Create an account" anchor then I would like to be able to reverse the process by clicking the "sign in" anchor on the registration form using Jquery.
I think I properly linked Jquery and the Js file in the head.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="script/jquery-3.1.1.js"></script>
<script src="script/javascript.js"></script>
</head>
Here's the new html
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
And here's the new javascript.js
$(document).ready(function(){
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
)};
Clicking on the anchors does nothing by the way.
Any help would be greatly appreciated, thanks in advance !
Change your HTML to this (I've added a class to each anchor).
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
Then replace your jQuery to this...
$('a.signin').on("click", function(e) {
e.preventDefault();
$('.register-form').fadeOut();
$('.login-form').fadeIn();
});
$('a.create').on("click", function(e) {
e.preventDefault();
$('.login-form').fadeOut();
$('.register-form').fadeIn();
});
Use the .on() function in jQuery. It's much better for events like on-click etc.
Okay, guess I forgot to use the $(document).ready(function), then made a syntax error at the very end of my javascript.js because I wrote )}; instead of });
Thanks a lot !
Once you link you html to jquery and javascript correctly, the above code toggles as expected.
Add the code below to you css file to hide the Registration form on initial launch of the web page.
.register-form {
display: none;
}
I have the following HTML code
<div class = "login">
<form>
<input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br>
<input type="password" id="password" name="password" placeholder="Password" style="text-align:center"> <br> <br>
<input onclick="loginButton();" name="login_btn" id="login_btn" type="submit" value="Login">
</form>
</div>
And the following JavaScript:
<script type="text/javascript">
function loginButton() {
console.log("this function was called")
}
</script>
In my console, when I click the submit button, "this function was called" appears for only a brief second, and then disappears. Yet when I put the submit button outside of the form, the message stays, and fully executes the rest of my function.
Your form gets submitted and the page reloads - because of type="submit" on input element.
Change it either to
type="button"
or
onclick="loginButton(); return false;"
I am relatively very new to AngularJS and javascript Please be merciful while answering.
I am trying to create one sample application where I want to nest controllers. MainController which will always be there acting as parent container which will render menu and user name on top if user is logged in. For now I am checking if user is stored in localStorage.
Each page will have its own controller which will do page specific things.
I am stuck at ng-submit and why its not working?
Any help is appreciated.
Index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
<script src="angularapp.js"></script>
</head>
<body ng-app="myAngularApp">
<div ng-controller="MainController">
<div ng-show="isLoggedIn">Menu</div>
<div ng-view>
</div>
</div>
</body>
login.html
<from ng-submit="login()">
<input type="text" id="username" ng-model="username"></input>
<input type="password" id="password" ng-model="password"></input>
<input type="submit" value="submit" id="submit" ng-submit="login()"></input>
</form>
angularapp.js
angular.module('myAngularApp',['ngRoute','ngResource'])
.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/home',{
controller:'SubController',
templateUrl:'templates/home.html'
})
.when('/login',{
controller:'MainController',
templateUrl:'templates/login.html'
});
}])
.controller('MainController',['$scope','$window','userService',function($scope,$window,userService){
$scope.isLoggendIn=userService.isLoggedIn;
console.log('here I come');
$scope.username='';
$scope.password='';
$scope.login=function(){
alert('Ignored???');
$window.localStorage['myUser']={username:$scope.username,password:$scope.password};
consoel.log('user is logged in now');
};
}])
.controller('SubController',['$scope',function($scope){
$scope.myContent='Contenst to show after logged in';
}])
.service('userService',['$window',function($window){
var self=this;
self.isLoggedIn=function(){
if($window.localStorage['myUser'])
return true;
else
return false;
};
}]);
Please change your code. Seems you have made spelling mistake.
<from ng-submit="submit()">
to:
<form ng-submit="submit()">
Also replace the following code.
<input type="submit" value="submit" id="submit" ng-click="submit()"></input>
No need of ng-submit="login()" in this place type="submit is enought and last one is button not input
<from ng-submit="submit()">
<input type="text" id="username" ng-model="username"></input>
<input type="password" id="password" ng-model="password"></input>
<button type="submit" value="submit" id="submit"></button>
</form>
Edit your code:
<input type="submit" value="submit" id="submit" ng-submit="login()"></input>
Must be as below:
<input type="submit" value="submit" id="submit" ng-click="submit()"></input>
I think there is a problem in your login.html. remove login() because you have submit()
<from ng-submit="submit()">
<input type="text" id="username" ng-model="username"></input>
<input type="password" id="password" ng-model="password"></input>
<input type="submit" value="submit" id="submit"></input>
</form>
i want to show a login form when a click is done on a link . i want to make default behaviour of div "hide ".. how can i do that ? may form is by default showing on page., please help me . it will b grate ful for you .
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
javascript:
$(document).ready (function() {
$('.signin').click(function() {
$('.form').show();
return false;
});
});
Add style to the "form" to hide it.
<div style="display:none;" class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
Set display property of form class to none as shown belo in using css.
Sign In
<div class="form">
<input type="text" value="" name="myinput" id="myinput"/>
<input type="submit" name="submit" value="submit"/>
</div>
css:
.form{
display:none;
}
javascript:
$(document).ready (function()
{
$('.signin').click(function()
{
$('.form').show();
$('.signin').hide();
});
});