2016-09-12 9 views
0

ログインページがあり、サインアップフォームを使用してログインフォームを置き換えようとしています。JQuery Replacewith DIVがロードされない

現在、私が持っている:

<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> 

私は、フォームクラスsignin_formを交換したいと思います:

     <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> 

私は現在、私は、単一の行を置き換えることができます使用していますreplaceWithを使用してそれがdivを含んでいなければ、divに入れるともうロードされません。

答えて

1

私はreplaceWithがあなたが望む機能を実現するための正しい方法ではないと思っています。これはあなたができないためではありません。新しいフォームを動的に作成し、新しい形で 代わりにあなたがサインインもして申し込みフォーム

  • 両方がCSSでの申し込みフォームを非表示にし、サインインもフォームを非表示にして表示し、ボタンのクリック時にのみサインインもフォーム
  • を示して作成し、次の

    1. を行う必要がありますサインフォーム。

    これは、後に続く種類の機能を実現する最も簡単で安全な方法です。

  • +0

    これはどこかでどのように行われているかに関するドキュメントはありますか? –

    +0

    あなたは私の答えを意味しますか?あなたに素早くスニペットを書き込ませてください。 – snit80

    +0

    すべてのドキュメント!!!あなたの答えを意味するものではありません。公式のドキュメントまたは他のドキュメント。 –

    関連する問題