Okay so i'm trying to add a script to my HTML file, but couldn't do so. I found out that when I try to console log the ids, they all returns null.
console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))
So here's the full code of my HTML file:
console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))
<div class="container" id="forms">
<div class="overlay-container">
<div class="overlay">
<div class="overlay-left">
<h2>Welcome Back!</h2>
<p>Please login with your personal info</p>
<button class="invert" id="signIn">Sign In</button>
</div>
<div class="overlay-right">
<h2>Hello, Friend!</h2>
<p>Please enter your personal details</p>
<button class="invert" id="signUp">Sign Up</button>
</div>
</div>
</div>
<form class="sign-up" action="#">
<h2>Create login</h2>
<div>Use your email for registration</div>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
<form class="sign-in" action="#">
<h2>Sign In</h2>
<div>Use your account</div>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign Up</button>
</form>
</div>
You want to make sure your DOM is loaded so that you can access the elements with getElementById otherwise you're going to get null as an output.
I've modified your snippet to add an event listener to the Window load event that will only print to the console the output of getElementById after the whole page has been loaded.
Read more about the Window load event here: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
window.addEventListener('load', (event) => {
console.log(document.getElementById('forms'))
console.log(document.getElementById('signIn'))
console.log(document.getElementById('signUp'))
});
<div class="container" id="forms">
<div class="overlay-container">
<div class="overlay">
<div class="overlay-left">
<h2>Welcome Back!</h2>
<p>Please login with your personal info</p>
<button class="invert" id="signIn">Sign In</button>
</div>
<div class="overlay-right">
<h2>Hello, Friend!</h2>
<p>Please enter your personal details</p>
<button class="invert" id="signUp">Sign Up</button>
</div>
</div>
</div>
<form class="sign-up" action="#">
<h2>Create login</h2>
<div>Use your email for registration</div>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
<form class="sign-in" action="#">
<h2>Sign In</h2>
<div>Use your account</div>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign Up</button>
</form>
</div>
You're probably including the <script> tag inside the <head> tag, so the script is being executed before the elements are mounted into the DOM, and getElementById() calls are returning null.
If that's the case, you might want to move the <script> tag inside the <body> tag as its last child. While this doesn't guarantee that the entire page is loaded before your script runs, it does guarantee that all elements before it are inserted into the DOM.
So instead of this:
<html>
...
<script type="text/javascript">...</script>
<body>
...
</body>
</html>
You can do this:
<html>
...
<body>
...
<script type="text/javascript">...</script>
</body>
</html>
You can also wait for the load event of the window before running your scripts (e.g. window.addEventListener('load', ...), which makes the placement of the <script> tag irrelevant, but it may defer your execution much longer than needed as it waits for all elements to be loaded, including images or videos.
Related
I am having trouble toggling between my signup and login forms on a page. I'm not too familiar with JavaScript and jQuery but that is what I am using. BTW, is there another way to do this with PHP?
Here's what I've got. My login form is shown when the page is loaded, and the signup form is hidden. When I click the toggle button to show the signup form, nothing happens.
$("#toggle-login").click(function() {
$("#signup").hide().attr("formnovalidate");
$("#login").show();
});
$("#toggle-signup").click(function() {
$("#login").hide().attr("formnovalidate");
$("#signup").show();
});
$("document").ready(function() {
$("#signup").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-data text-center">
<h1 class="form-header">Header</h1>
<div id="login" class="main-login">
<form class="login-form" action="includes/login.inc.php" method="post">
<input name="mailuid" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Need to Create an account?</p>
<span class="btn btn-default" href="#" id="toggle-signup">Sign Up/span>
</div>
<div id="signup" class="main-signup text-center">
<form class="signup-form" action="includes/signup.inc.php" method="post">
<input name="pagename" type="text" placeholder="Page Name"></input>
<br>
<input name="pwd" type="password" placeholder="Password"></input>
<br>
<input name="pwd-repeat" type="password" placeholder="Repeat Password"></input>
<br>
<button name="login-submit" type="submit">Login</button>
</form>
<p>Already have an account?</p>
<span class="btn btn-default" href="#" id="toggle-login">Log In</span>
</div>
</div>
Try moving the <script> block to the bottom of your page. Currently you are trying to attach event click handlers for DOM-Elements that are not present at the moment when the script block is executed.
Alternatively you can move the jQuery click handlers into the jQuery('document').ready() function to make sure the DOM is ready when attaching the click handlers.
Have your script defer so that it loads after the html has loaded
<script src="name_of_your_js_file" defer>
I've made a login screen. There's 2 forms inside one div. One containing login box, the other is for registration which is hidden in css by using display:none;. Below the login button there's a paragraph with a tag to click to register. How can I make it so when you click the a tag it just switches from login form to register form?
Im at the very begining stage if it comes to javascript.
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
So here's what I've found on codepen but I can't get it to work on my website:
<script> $('.message a').click(function(){$('form').animate({height: "toggle", opacity: "toggle"}, "slow");}); </script>
One reason that your script may not work is if you included it within the <head>...</head> of the document instead of just before the closing </body> tag.
The reason the script would have failed in this case is due to the <body>...</body> not being loaded when your script runs. Check for any errors in your browser's console.
Another reason is perhaps you loaded jQuery after your custom script. For example:
<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
instead of:
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>
Add some css to hide the login form.
$('.message a').click(
function() {
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
}
);
.login-form {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="e-mail"/>
<button>create</button>
<p class="message">Already have an account? Sign in!</p>
</form>
<form class="login-form">
<input type="text" placeholder="login"/>
<input type="password" placeholder="password"/>
<button>Sign in</button>
<p class="message">Need an account? Register!</p>
</form>
</div>
</div>
Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.
As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible.
How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"?
So, if the user clicked on the "send an invite" button, the sent an invite form will appear and the blue buttons will disappear "you can go back by clicking the back button".
Is it possible to use dynamic ID dedication using JS to achieve this? as I will have more than 2 options on some pages etc... For example, give the <a class="button button-box"><p>Send an invite</p></a> an id "#send-and-invite-form", it will then find the form that has that ID and show it. Then hide the div that contains those boxes until clicked back.
Here is a simplified HTML structure:
<div>
<a class="button button-box"><p>Send an invite</p></a>
<a class="button button-box"><p>Add manually</p></a>
</div>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
Keep both the forms hidden at first and give a ID to each <a> and also to the <form>
Then
$("#id-of-btn1").click(function(){
$("#form-1").toggle();
});
and
$("#id-of-btn2").click(function(){
$("#form-2").toggle();
});
EDIT:
This could be a solution to make it completely independent of ID/Classes.
If you give a class to div containing all the <a> then
$(".class-of-div a").click(function(){
var t=$(this).index();
$("body").find("form").hide();
$("body").find("form:eq("+t+")").toggle();
});
This will work for corresponding <a> and <form> only,so make sure that you have them in order.
.show{display:block;}
.hide{display:none;}
<a class="button button-box" id="lnkInvite" ><p>Send an invite</p></a>
<a class="button button-box" id="lnkManually"><p>Add manually</p></a>
<form data-parsley-validate class="hide">Send an Invite Form</form>
<form data-parsley-validate class="hide">Add manually form</form>
<script type="text\javascript">
$().ready(function(){
$("#lnkInvite").click(function(){
/*Toggle the show hide css class*/
});
$("#lnkManually").click(function(){
/*Toggle the show hide css class*/
});
});
</script>
You can achieve this with the help of :target pseudo selector. This is pure CSS solution:
form {
display: none;
}
form:target {
display: block;
}
<div> <a class="button button-box" href="#send-and-invite-form"><p>Send an invite</p></a>
<a class="button button-box" href="#add-manually"><p>Add manually</p></a>
</div>
<form id="send-and-invite-form" data-parsley-validate>
Invite
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
<form id="add-manually" data-parsley-validate>
Manually
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
It is also possible to have default tag preselected, however it requires changing order of forms and using tricky selector:
form, form:target ~ #send-and-invite-form {
display: none;
}
#send-and-invite-form, form:target {
display: block;
}
Demo: http://jsfiddle.net/dfsq/5633tu4c/
Simmple solution using js and style attributes.
<html>
<head>
<script>
function showhide1(){
document.getElementById("form1").style.display='block';
document.getElementById("form2").style.display='none';
}
function showhide2(){
document.getElementById("form2").style.display='block';
document.getElementById("form1").style.display='none';
}
</script>
</head>
<body>
<div>
<a class="button button-box" onclick="showhide1()"><p>Send an invite</p></a>
<a class="button button-box" onclick="showhide2()"><p>Add manually</p></a>
</div>
<form data-parsley-validate id="form1" >
<fieldset>
<div>
<input name="" type="email" placeholder="Email address1" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate id="form2">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<script>
document.getElementById("form2").style.display='none';
document.getElementById("form1").style.display='none';
</script>
</body>
</html>
Keep both forms hidden until the button for each is clicked. Clicking the respective button will show the required form AND hide the button. Click back hides the form and shows the button again.
I implemented for the invite section. You will have to implement for the manual as well, but hopefully this points you in the right direction. Also, I skipped the jQuery, but obviously this is your choice.
CSS
.hidden{
display: none;
}
HTML
<div> <a id="inviteButton" class="button button-box"><p>Send an invite</p></a></div>
<form id="inviteForm" class="hidden">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a id="backButtonInvite">Back</a></div>
</form>
Javascript
var inviteButton = document.querySelector("#inviteButton");
var inviteForm = document.querySelector("#inviteForm");
var backButtonInvite = document.querySelector("#backButtonInvite");
inviteButton.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
this.classList.toggle("hidden");
});
backButtonInvite.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
inviteButton.classList.toggle("hidden");
});
Here is the fiddle.
I'm struggling with a solution for this. I have the first block of code, which I want to use for css formatting/look feel etc.
<div class="login-form">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div> <!-- End Error box -->
<form action="#" method="get" >
<input type="text" placeholder="User name" class="input-field" required/>
<input type="password" placeholder="Password" class="input-field" required/>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
Then I have this separate code that uses a script to submit the user info once entered. I want to move the actions that this script performs onto the above code. Therefore having the look and feel of the first block of code and the actions of the second.
I'm learning at the moment, so it seems logical to try and use example code that exists as a starting point. I'm not able to find any help on goofle that direcly helps resolve this question.
I think if I could work out if I can wrap the script around the top block I could get it from there, just need some direction.
<div class="container" id="login-block">
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
This is what I wanted to achieve. Works now, only taken 3 hours to work it out ;-/
<div class="container" id="login-block todoapp">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="page-icon-shadow animated bounceInDown" > </div>
<div class="login-box clearfix animated flipInY" id="login-block">
<div class="page-icon animated bounceInDown">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="login-logo">
<img src="img/login-logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form content">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="btn btn-login" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div></div> <!-- End Error box -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
<div class="login-links">
<a href="forgot-password.html">
Forgot password?
</a>
<br />
<a href="sign-up.html">
Don't have an account? <strong>Sign Up</strong>
</a>
</div>
</div>
</div>
</div> </div>