Can you assist me with my code issue?
The scenario is as follows: I have two forms - one for registration and one for login.
I want to dynamically replace the login form with the register form when the user clicks on the "Sign up" link. Similarly, if the user already has an account, I'd like to switch out the register form for the login form when they click on the "Log in" link.
Below are the two forms provided:
<!-- 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 ? <a href="#" onclick="display('#register')">Sign up</a></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 ? <a href="#" onclick="display('#login')">Log in</a></p>
</form>
</div>
Script :
$(document).ready(function(){
function display (open){
$(open).css("display", "block");
$(".form").not($(open)).css("display","none");
}
});
I believe there might be a missing or incorrect element in my code, but I'm not entirely sure what it is.