Replace form by another one on click with javascript - javascript

I need your help for my code :
I've got two forms, one to register and another one to log in.
I would like to replace the log in form by the register form when the user clicks on "Sign up" link. Same if he already has an account, I would like to replace the register form by the log in form when clicking on the "log in" link.
Here my two forms :
<!-- Login form -->
<div class="log form" id="login">
<h2>Log in</h2>
<form class="form_log">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Don't have an account ? Sign up</p>
</form>
</div>
<!-- Register form -->
<div class="register form" id="register">
<h2>Sign up</h2>
<form class="form_register">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Already registered ? Log in</p>
</form>
</div>
Script :
$(document).ready(function(){
function display (open){
$(open).css("display", "block");
$(".form").not($(open)).css("display","none");
}
});
I think something is missing or wrong in my code but I don't know exactly what.

Toggle can do toggle between the display of form
function display() {
$("#login").toggle();
$("#register").toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Login form -->
<div class="log form" id="login" style="display: none">
<h2>Log in</h2>
<form class="form_log">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Don't have an account ? Sign up</p>
</form>
</div>
<!-- Register form -->
<div class="register form" id="register">
<h2>Sign upn</h2>
<form class="form_register">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Already registered ? Log in</p>
</form>
</div>

Try this. What wrong with your code is you don't put your function inside a ready() event handler.
function display(divId) {
$('.form').hide();
$(divId).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Login form -->
<div class="log form" id="login" style="display: none">
<h2>Log in</h2>
<form class="form_log">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Don't have an account ? Sign up</p>
</form>
</div>
<!-- Register form -->
<div class="register form" id="register">
<h2>Sign upn</h2>
<form class="form_register">
<div>
<label for="login">Login : </label>
<input type="text" name="login" id="login" required>
</div>
<div>
<label for="password">Password : </label>
<input type="text" name="password" id="password" required>
</div>
<div>
<input type="submit" value="Connexion">
</div>
<p>Already registered ? Log in</p>
</form>
</div>

Related

How to make a div appear and disappear on click using querySelector and addEventListener

I got the divs that have the email and password from bootstrap. I have css for the id dropdownlogin, and I did display: none; this is my first post so I hope I have given enough information.
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.querySelector("#dropdownlogin").addEventListener('click', function()
{
dropdownlogin.style.display = block;
})
});
</script>
<div class="login">
Login
<center>
<form id="dropdownlogin" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button></p>
</div>
</form>
</center>
</div>
You can attach the event on the Login and on click of you can show or hide the form. Add a class to the form and on click of the link toggle the visibility of the form
const formContainer = document.getElementById('dropdownlogin');
function toggleForm(e) {
formContainer.classList.toggle('hideForm');
}
.hideForm {
display: none
}
<div class="login">
Login
<form id="dropdownlogin" class="hideForm" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button>
</div>
</form>
</div>
<script>
var mydiv = document.querySelector("#dropdownlogin")
var mybtn = document.querySelector("#mybtn")
mybtn.addEventListener("click", function ()
{
mydiv.classList.toggle("hidden")
});
</script>
.hidden{
display:none;
}
<div class="login">
Login
<center>
<form id="dropdownlogin" class="hidden" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name#example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button></p>
</div>
</form>
<button id="mybtn">Click Me!</button>
</center>
</div>

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.

how to access different form elements in an HTML page using Angular JS without using Views of Angular JS

Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.
You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/

Post Values to an alert box after been validated

I have this form that has a lot of validation in place.
What i'm struggling with is, when all fields have been filled out correctly I want the values of the fields to be displayed in an alert box.
Here is my code
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
My HTML is
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
I have also provided a Fiddle - http://jsfiddle.net/barrycorrigan/vzdp64m4/
Any help is greatly appreciated
try something like this,
$("#form").submit(function(){
var x = $(this).serializeArray();
$.each(x, function(i, field){
alert(field.name + " : " + field.value);
});
});
demo in FIDDLE

jquery toggle between login and registration in same page

I have two form login and registration, by default show login form. There has a link "Don't have account?" I want to create when click on link then registration form will show and login form will hide.
HTML Code:
<div class="login_form">
<div id="form">
<h2>Login Here </h2>
<form method="post" action="login.php" >
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="login_username" id="login_username" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="login_password" id="login_password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="login" id="login" class="btn btn-success" />
</div><!--end form_elements-->
<br />
Don't have a account?
</form>
</div>
</div>
<div class="clear_both"></div>
<div class="register_form">
<div id="form">
<h2>Register Here </h2>
<form method="post" action="login.php" name="">
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="username" id="usename" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Email</label>
<input type="text" name="email" id="email" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="password" id="password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">RePassword</label>
<input type="password" name="repassword" id="repassword" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="register" id="register" class="btn btn-success" />
</div><!--end form_elements-->
</form>
</div><!-- div form-->
jQuery Code:
$(function(){
('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});
Please guide me to solve this difficulty.
Use as , $ is missing in show_register
$(function(){
$('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});

Categories

Resources