I'm making a login/register webpage and would like to alternate between both when you either click on Register or Login anchors. To do so I'm using Jquery and I cannot figure out the reason why it doesn't run the function. I have organised the login and register with the <div id="register" or id="login". The goal is to use the class called collapsed to not display one of the two. If you need any more info that I have forgotten to add please comment.
$(document).ready(function() {
$("div #register").addClass('collapsed');
$('#form a').click(function(event) {
event.preventDefault();
$(event.target).parent().parent().parent().addClass('collapsed');
$(event.target).parent().parent().parent().siblings().removeClass('collapsed');
document.title = $(event.target).attr('id');
});
});.collapsed {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
<div id="register" class="">
<h2>Register</h2>
<form action="login_register.php" method="post">
<span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
<div id="half-left" class="textbox">
<input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
</div>
<div id="half-right" class="textbox">
<input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
</div>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
</form>
</div>
<div id="login" class="">
<h2>Login</h2>
<form action="login_register.php" method="post">
<span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
<span class="password">Forgot <a href="#">password?</a></span>
</form>
</div>
</div>CodePudding user response：
Needed an older version of Jquery for it to work on Dreamweaver.
The code worked fine.
Here is an older version that should work: jQuery actions (in general) not working -Dreamweaver
CodePudding user response：
try this code
$(document).ready(function() {
$("#register").hide();
$('#form a').click(function(event) {
event.preventDefault();
let id = $(this).attr("id");
if (id === "Login"){
$("#login").show();
$("#register").hide();
}
else if(id === "Register"){
$("#login").hide();
$("#register").show();
}
document.title = $(this).attr('id');
});
});
CodePudding user response：
First of all, Dreamweaver is the worst. I hope one day you move off it through your coding journey at some point. See if this doesn't help with your Dreamweaver preview.
You have to use proper HTML format, ie; proper use of <HTML> and <head> etc.
So change it to something like;
$(document).ready(function() {
$("div #register").addClass('collapsed');
$('#form a').click(function(event) {
event.preventDefault();
$(event.target).parent().parent().parent().addClass('collapsed');
$(event.target).parent().parent().parent().siblings().removeClass('collapsed');
document.title = $(event.target).attr('id');
});
});.collapsed { display: none; }<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="form">
<div id="register" class="">
<h2>Register</h2>
<form action="login_register.php" method="post">
<span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
<div id="half-left" class="textbox">
<input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
</div>
<div id="half-right" class="textbox">
<input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
</div>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
</form>
</div>
<div id="login" class="">
<h2>Login</h2>
<form action="login_register.php" method="post">
<span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
<span class="password">Forgot <a href="#">password?</a></span>
</form>
</div>
</div>
</body>
</html>Dreamweaver can be VERY particular about proper coding and formatting etc.