JQuery Replacewith DIV does not load
Question
So I have login page and I am trying to replace the login form with the signup form if they click the button to sign up.
Currently I have:
<script>
$(document).ready(function(){
$("button").click(function(){
$("w").replaceWith(function(n){
return "DIV HERE BUT DIVS DO NOT WORK";
});
});
});
</script>
</head>
<body>
<div class="col-lg-6 col-sm-6 col-xs-12 social-login">
<a href="#" class="google_button login_btn">
<i aria-hidden="true" class="fa fa-google-plus-square"></i><span>Continue with Google</span>
</a>
<a href="#" class="facebook_button login_btn">
<i aria-hidden="true" class="fa fa-facebook-square"></i><span>Continue with Facebook</span>
</a>
<a href="#" class="twitter_button login_btn">
<i aria-hidden="true" class="fa fa-twitter-square"></i><span>Continue with Twitter</span>
</a>
<a href="#" class="linkedin_button login_btn">
<i aria-hidden="true" class="fa fa-linkedin-square"></i><span>Continue with Linkedin</span>
</a>
<a href="/signup" class="email_button login_btn">
<i aria-hidden="true" class="fa fa-linkedin-square"></i><span>Continue with Email</span>
</a>
<button>Continue With Email</button> <span class="light_grey">By signing up you indicate that you have read and agree to the <a target="_blank" href="#">Terms of Service</a> and <a target="_blank" href="#">Privacy Policy</a>.</span>
</div>
<form action="" class="signin_form" method="post">
<w><div class="title">Login</div></p></w>
<div class="form_inputs">
<div class="form_column">
<input type="text" name="username" id="username" placeholder="Email" value="" class="username">
</div>
<div class="form_column">
<input type="password" name="password" id="password" placeholder="Password" value="" class="password">
</div>
<div class="form_column">
<span><div class="remember_checkbox"><input type="checkbox" value="" name="remember_checkbox" checked="checked" class="remember_checkbox">Remember Me</div></span><input type="submit" value="Sign In" name="send" class="btn btn-primary pull-right" />
<span><a href="#" class="forgot_password">Forgot Password?</a></span>
</div>
</div>
</form>
</body>
I would like to replace the form class signin_form with:
<form action="" class="signup_form" method="post">
<div class="title">Sign up!</div>
<div class="form_inputs">
<div class="form_column">
<input type="text" name="email" id="email" value="<?php echo $dd; ?>" class="email" placeholder="Email">
</div>
<div class="form_column">
<input type="text" name="username" id="username" placeholder="First Name" value="<?php echo $_POST['username']; ?>">
</div>
<div class="form_column">
<input type="password" name="password" id="password" placeholder="Password" value="" class="password">
<div class="form_column">
<input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password" value="" class="confirm_password">
</div>
<div class="form_column">
<span><a href="/login" class="forgot_password">Already Have an Account?</a></span><input type="submit" value="Sign Up" name="send" class="btn btn-primary pull-right" />
</div>
</div>
</form>
Using the replaceWith that I am currently using I can replace a single line if it doesn't include a div, if I put in a div it doesn't load anymore.
1 answers
solution1
1 ACCPTED 2016-09-12 01:36:19
I think replaceWith is not the right way to achieve the functionality that you want, this is not because you cannot, it is because you will then need to dynamically create a new form and have to hook all the events to the elements in the new form. Instead you should do the following
- Create both the Signin and Signup form
- Hide the Signup form in CSS and show only the Signin form
- On click of the button Hide the Signin form and show the signup form.
This will be the easiest and safest way to achieve the sort of functionality you are after.
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.