I am making a laravel based website and i have a login form and when i press "Register" i want to be switched with the register form but it's not working.Here is the code.
home.js:
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
home.blade.php
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<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>
</div>
</body>
</html>
home.js is in public/js/home.js
Try this
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> //** Add jQuery
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<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" id="loginID"> //******* add ID
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered? Create an account
</p>
</form>
</div>
</div>
</body> //** Missed the closing tag
</html>
Add this to you home.js file
#loginID{
display:none;
}
Working CODE SNIPPET
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
#loginID{
display:none;
}
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<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" id="loginID">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered? Create an account
</p>
</form>
</div>
</div>
</body>
</html>
<div class="login-page">
<div class="form">
<form id="a" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="login">Not registered? Create an account</p>
</form>
<form id="b" class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="register">Already registered? Sign In</p>
</form>
</div>
</div>
Here are the script
$(document).ready(function () {
$('.register-form').hide();
$('.login-form').show();
$('.register').click(function () {
$('.register-form').show();
$('.login-form').hide();
});
$('.login').click(function () {
$('.register-form').hide();
$('.login-form').show();
});
});
Related
I wrote a html code for login page and when I clicked on login button it is not showing any login page. I am very much confused
document.querySelector("#show-login").addEventListner("click", function() {
document.querySelector("popup").classList.add("active")
});
document.querySelector(".popup.close-btn").addEventListner("click", function() {
document.querySelector("popup").classList.remove("active")
});
<div class="center">
<button id="show-login">Login</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Log in</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<div class="form-element">
<button>Sign in </button>
</div>
<div class="form-element">
Forgot password?
</div>
</div>
you can try this logic :
document
.querySelector("#show-login")
.addEventListener("click", function () {
document.querySelector(".popup").classList.add("active");
});
document
.querySelector(".popup .close-btn")
.addEventListener("click", function () {
document.querySelector(".popup").classList.remove("active");
});
.popup {
display: none;
}
.popup.active {
display: block;
}
<!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="center">
<button id="show-login">Login</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Log in</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email" />
</div>
<div class="form-element">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password" />
</div>
<div class="form-element">
<input type="checkbox" id="remember-me" />
<label for="remember_me">Remember me</label>
</div>
<div class="form-element">
<button>Sign in</button>
</div>
<div class="form-element">
Forgot password?
</div>
</div>
</div>
</body>
</html>
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>
I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">
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;
});
});
I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?
the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide
Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>