How to switch between 2 forms using javascript?
Question
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? <a href="#">Sign in!</a></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? <a href="#">Register!</a></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>
2 answers
solution1
0 2019-01-17 01:35:50
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? <a href="#">Sign in!</a></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? <a href="#">Register!</a></p> </form> </div> </div>
solution2
0 ACCPTED 2019-01-17 01:38:40
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.