I am new to HTML and Javascript. I was working on creating a basic login screen.
As I am trying to print the value of the email and the password in the console, I get nothing. Can someone help me out?
document.querySelector('.form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log(email, password);
});
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form"></form>
<div class="form__group">
<label class="form__label" for="email">Email address</label
><input
class="form__input"
id="email"
type="email"
placeholder="you#example.com"
required=""
/>
</div>
<div class="form__group ma-bt-md">
<label class="form__label" for="password">Password</label
><input
class="form__input"
id="password"
type="password"
placeholder="••••••••"
required=""
minlength="8"
/>
</div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</div>
<!-- <script src="/js/login.js"></script> -->
That's because <form class="form"></form> is empty, you should put the inputs inside it.
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form">
<div class="form__group"><label class="form__label" for="email">Email address</label><input class="form__input" id="email" type="email" placeholder="you#example.com" required="" /></div>
<div class="form__group ma-bt-md"><label class="form__label" for="password">Password</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</form>
</div>
Related
Welcome to my question.
I am trying to make a sign up form that checks for some things.
I want to make an event listener on the submit button, to catch some things
First of all I have to prevent the default behavior of submission of the form.
That is where I am stuck a while now. For some reason it does not seem to work.
This is how my form is made:
<form id="myform" class="signup-form" onsubmit = "signup()" method="POST">
<!-- form header -->
<div class="form-header">
<h1>Become a Member</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="username" class="label-title">Username *</label>
<input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Confirm Username *</label>
<input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
</div>
<!-- Password and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
</div>
</div>
</div>
<!-- form footer -->
<div class="form-footer">
<span>Are you already a member? Click here to login!</span>
<button id= "submit-button"type="submit" class="btn">Create</button>
</div>
</form>
</div>
And this is how my sign up function on my js file is created:
// sign up
function signup(){
const fUsername = document.getElementById("username").value;
const sUsername = document.getElementById("confirm-username").value;
const email = document.getElementById("email").value;
const fPassword = document.getElementById("password").value;
const sPassword = document.getElementById("confirm-password").value;
const form = document.getElementById("myform");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("I am in eventListener");
});
}
Please tell me what I am doing wrong! Also I have to mention that I have figured out that if I make my form like this
<form id="myform" class="signup-form" onsubmit = "signup(); return false;" method="POST">
it will not submit automatically, but I wanted to do it with the eventListener.
Thank you in advance
Call signup when the page loads instead of when the submit event is fired:
// sign up
function signup() {
const fUsername = document.getElementById("username").value;
const sUsername = document.getElementById("confirm-username").value;
const email = document.getElementById("email").value;
const fPassword = document.getElementById("password").value;
const sPassword = document.getElementById("confirm-password").value;
const form = document.getElementById("myform");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("I am in eventListener");
});
}
signup()
<form id="myform" class="signup-form" method="POST">
<!-- form header -->
<div class="form-header">
<h1>Become a Member</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="username" class="label-title">Username *</label>
<input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Confirm Username *</label>
<input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
</div>
<!-- Password and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
</div>
</div>
</div>
<!-- form footer -->
<div class="form-footer">
<span>Are you already a member? Click here to login!</span>
<button id="submit-button" type="submit" class="btn">Create</button>
</div>
</form>
Hey need help with this
I'm try to coding simple login page
and im trying to pass the email and password as post to login.php
when I click on submit only send me to the page without "email and password " value
<div class="logo signin-label fade-in"> <style="width: 100px;"> </div>
</div>
<form action="login.php" method="POST" id="Login">
<div class="form-group">
<input class="form-control" placeholder="email id" id="email" type="email">
</div>
<div class="form-group">
<input class="form-control" id="password" placeholder="email password" type="password">
</div>
<div class="forgot">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
Form field need "name" attribute, please try with this:
<form action="login.php" method="POST" id="Login">
<div class="form-group">
<input class="form-control" placeholder="email id" id="email" name="email" type="email">
</div>
<div class="form-group">
<input class="form-control" name="password" id="password" placeholder="email password" type="password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
I am making form and I have some problems validating it.
HTML:
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Javascript:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email")=="" || document.getElementById("password") || document.getElementById("last_name") || document.getElementById("first_name"))
return false;
});
</script>
Even with this javascript code added the form still submits to signup.php.
And should I add extre checks in php aswell.
//add return function on it
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="button" onclick="return validation()" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
<script>
public function validation(){
if(document.getElementById("email").value=="" || document.getElementById("password").value="" || document.getElementById("last_name").value="" || document.getElementById("first_name")).value==""{
return false; }
else {
document.getElementById("regForm").submit();
}
}
</script>
or use this
//add required on input it will automatically return message
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email" required>
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass" required>
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass" required>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name" required>
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Replace your code with this
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
You should only add "required" in the html tag in tags. It'll automatically add display text that the field is required.
Like this:
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
You forgot to add .value to check the values of inputs. Also, you have to use preventDefault in submit function to prevent form submission:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email").value == "" || document.getElementById("password").value == "" || document.getElementById("last_name").value == "" || document.getElementById("first_name").value == "")
event.preventDefault();
});
</script>
Since you're using jquery, you can also use its selector:
<script type="text/javascript">
$("#regForm").submit(function(event){
if($("#email").val() == "" || $("#password").val() == "" || $("#last_name").val() == "" || $("#first_name").val() == "")
event.preventDefault();
});
</script>
what about using event.preventDefault() like this:
<script type="text/javascript">
$("#regForm").submit(function(event){
event.preventDefault();
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
return false;
});
</script>
Ive got a form with ng-submit registrating new user,it should update the registration window when the submit button is pressed.But it doesnt do it correct:(
Can you watch my code and say whats wrong?I`m new with AngularJs
Here's the html:
<div class="registration-box" ng-show="registrationShow">
<form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
<div class="input-registration-fields">
<label>Enter login:</label>
<input type="text" name="login" class="form-input" ng-model="newUser.login" ng-pattern="loginPattern" required>
<div class="error" ng-if="registrationForm.login.$error.pattern">Enter correct login</div>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
<br>
<label>Enter email:</label>
<input type="text" name="email" class="form-input" ng-model="newUser.email" ng-pattern="emailPattern" required>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
<div class="error" ng-if="registrationForm.email.$error.pattern">Enter correct email</div>
<br>
<label>Enter password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.password" ng-pattern="passwordPattern" required>
<label>Confirm password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-pattern="passwordPattern" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
<div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
<br> </div>
<div class="registration-checkbox">
<input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> I accept all terms and conditions </div>
<div class="registration-box__logic-buttons">
<button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
<button id="cancelRegistrationButton">Cancel</button>
</div>
</form>
</div>
Here's angular function:
$scope.addNewUser = function (userDetails, isvalid) {
if (isvalid) {
$scope.userlist.push({
username: userDetails.login
, password: userDetails.password
, email: userDetails.email
})
// $scope.resetRegistration();
}
console.log($scope.userlist)
}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.addNewUser = function (userDetails, isvalid) {
$scope.userlist= [];
if (isvalid) {
$scope.userlist.push({
username: userDetails.login,
password: userDetails.password,
email: userDetails.email
});
// $scope.resetRegistration();
}
console.log($scope.userlist);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="registration-box">
<form name="registrationForm" ng-submit="addNewUser(newUser,registrationForm.$valid)" novalidate>
<div class="input-registration-fields">
<label>Enter login:</label>
<input type="text" name="login" class="form-input" ng-model="newUser.login" required>
<div class="error">Enter correct login</div>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.login.$error)}} </div>-->
<br>
<label>Enter email:</label>
<input type="text" name="email" class="form-input" ng-model="newUser.email" required>
<!-- <div class="error" ng-show="showError"> {{getSigningError(registrationForm.email.$error)}} </div>-->
<div class="error">Enter correct email</div>
<br>
<label>Enter password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.password" required>
<label>Confirm password:</label>
<input type="password" name="password" class="form-input" ng-model="newUser.registationPasswordConfirm" ng-class="newUser.password!=newUser.registationPasswordConfirm ? 'invalid-password' : 'ng-valid'" required>
<div class="error" ng-if="newUser.password!=newUser.registationPasswordConfirm">Password doesnt match</div>
<br> </div>
<div class="registration-checkbox">
<input type="checkbox" class="registration-check" ng-model="acceptRegistration" required> I accept all terms and conditions </div>
<div class="registration-box__logic-buttons">
<button type="submit" id="confirmRegistrationButton" ng-disabled="registrationForm.$invalid">Confirm</button>
<button id="cancelRegistrationButton">Cancel</button>
</div>
</form>
</div>
</div>
</div>
see the snippet, you might be getting error "cannot set property of undefined" while you push the object in your scope.userlist.
I have a modal. In the header of the modal I have title which is login. And in the body I have a login form and in the footer I have login button.
After the login button I have a hyper text for those who wants to create account which by clicking on it the login form disappear and the register form appears.
Is there any possibility that I can use the same button for logging in to register. (In the simplest word is it possible to use the same button in 2 different forms or if I can't, how can I add a button to the footer and make it act as the submit button of the reiteration form)
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="background-color: #222">
<div class="mu-title">
<span class="mu-subtitle" id = "loginTitle">Login</span>
</div>
</div>
<!-- Body of the modal -->
<div class="modal-body" style="background-color: #222">
<form id="registerForm" method="POST" action="register.php" novalidate="novalidate" style="display: none">
<div class="form-group">
<label for="name" class="control-label" style="color: white">Full Name</label>
<input type="text" class="form-control" id="fullName" name="fullName" value="" required="" title="Please enter you full name" placeholder="Full Name">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
<div class="form-group">
<label for="matrix" class="control-label" style="color: white">Matrix Number</label>
<input type="text" class="form-control" id="matrixNO" name="matrixNO" value="" required="" title="Please enter you Matrix Number" placeholder="Matrix Number ">
<span class="help-block"></span>
</div>
</form>
<form id="loginForm" method="POST" action="login.php" novalidate="novalidate">
<div class="form-group">
<label for="username" class="control-label" style="color: white">Username</label>
<input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="username#siswa.um.edu.my">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="password" class="control-label" style="color: white">Password</label>
<input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
</div>
</div>
<div class="modal-footer" style="background-color: #222">
<button type="submit" id ="loginButt" class="mu-readmore-btn">Login</button></br></br>
</form>
<span style="color: white" >Create an <a href= "#" style="color: white" onClick="$('#loginForm').hide();$('#registerForm').show(); " >Account</a> </span>
</div>
</div>
Here are some boilerplates that you can try with....(your part is just basically determining which form is active...)
$(document).ready(function(){
$('#submitbtn').click(function(e){
e.preventDefault();
var form=$('#currentForm').val();
if(form=="login")
{
alert('submit to login');
}
else
{
alert('submit to register');
}
});
$('#btnchange').click(function(){
var form=$('#currentForm').val();
if(form=="login")
{
$('#currentForm').val('register');
$('#registration-form').show();
$('#login-form').hide();
}
else
{
$('#currentForm').val('login');
$('#registration-form').hide();
$('#login-form').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form method="post" action="register.php" name="registration-form" id="registration-form" style="display:none;">
<label for="name">Name:</label>
<input type="text" name="usename"><br/>
<label for="emailid">Email ID:</label>
<input type="text" name="emailid"><br/>
<label for="password">Password :</label>
<input type="password" name="password">
</form><br/><br/>
<form method="post" action="login.php" name="login-form" id="login-form">
<label for="emailid">Email ID :</label>
<input type="text" name="emailid">
<label for="password">Password :</label>
<input type="password" name="password">
</form>
<input type="hidden" value="login" id="currentForm"/>
<input type="button" value="Submit" name="submitbtn" id="submitbtn">
<input type="button" value="Toggle Form" id="btnchange"/>
Just so I understand your question a little bit better, the basic idea of what you're trying to do is:
Single page modal, one form. Take user text input, check for existing user with that info, create new user if none exists?