JavaScript e.preventDefault(); does not work in form - javascript

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>

Related

Unable to read event Content from a form in HTML

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>

Jquery function not executing on form submission

I have this form:
<form id="user-info-form" role="form" data-toggle="validator">
<div class="row">
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-name" class="form-label">Your Name</label>
<input type="text" name="input-name" class="form-input" placeholder="Your Name..." required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-email-address" class="form-label">Enter your Email address</label>
<input id="input-email-address" type="email" name="input-email-address" class="form-input" placeholder="Email Address..." required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="button-wrapper button-wrapper-second">
<button class="button" type="submit">Submit</button>
</div>
</form>
On it's submission I'm trying to execute some code without using what was submitted on the form for now.
The jquery code:
$('#user-info-form').submit(function(event) {
event.preventDefault();
code to be executed..
})
However, it's just not working. I instead end up getting redirected to the same page with this URL:
http://localhost/project/?input-name=nickolas&input-email-address=nickolas%40gmail.com
The default browser submission it seems.
Am I doing anything wrong?
Unable to replicate the issue. I used the following test code.
$(function() {
$('#user-info-form').submit(function(event) {
event.preventDefault();
console.log("Form Submitted");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="user-info-form" role="form" data-toggle="validator">
<div class="row">
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-name" class="form-label">Your Name</label>
<input type="text" name="input-name" class="form-input" placeholder="Your Name..." required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-input-wrapper col-xs-6">
<div class="form-group">
<label for="input-email-address" class="form-label">Enter your Email address</label>
<input id="input-email-address" type="email" name="input-email-address" class="form-input" placeholder="Email Address..." required />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="button-wrapper button-wrapper-second">
<button class="button" type="submit">Submit</button>
</div>
</form>

ng-submit doesnt work correct in my form with AngularJS

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.

Change the task of a button placed in the footer of modal

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?

JavaScript password and password confirmation match

I am not able to match the passwords, before Submit is clicked.
The submit goes even if the passwords are different.
var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword(){
if (pass2.value == pass1.value) {
pass2.setCustomValidity('');
} else {
pass2.setCustomValidity('Both passwords do not match');
}
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php">
<div class="form-group">
<label for="inputFirstName">First name:</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
<label for="inputLastName">Last name:</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email address:</label>
<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
<label for="inputRepeatPassword">Password repeat:</label>
<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>
It seems like I miss something, but I am not able to find it whole day already - any thoughts will be appreciated!
The validate should return the validation status and the form's onsubmit event handler should be able to react. Here's the sample:
var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword() {
var status = false;
if (pass2.value == pass1.value) {
status = true;
pass2.setCustomValidity('');
} else {
pass2.setCustomValidity('Both passwords do not match');
}
return status;
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php" onsubmit="return validatePassword();">
<div class="form-group">
<label for="inputFirstName">First name:</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
<label for="inputLastName">Last name:</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email address:</label>
<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
<label for="inputRepeatPassword">Password repeat:</label>
<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>
You have code to display if the passwords are the same or not. However, there is not any code to control how to handle submit with invalid passwords.
Here are two options:
1) <form onSubmit> as described in Pankaj's answer.
2) You could also have your validate function disable your submit button.
(Add an id to your submit <button type="submit" id=submitBtn class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
function validatePassword(){
var submit = document.getElementById('submitBtn');
if (pass2.value == pass1.value) {
pass2.setCustomValidity('');
submit.disabled = false;
} else {
pass2.setCustomValidity('Both passwords do not match');
submit.disabled = true;
}
}
The had to be put in the bottom before the in order to work.

Categories

Resources