残りのウェブサービスに入るときにJavaScript機能を切り替えるURL

私は同じページに2つのフォームがあり、ログインが消えてサインアップが表示されるアイコンをクリックすると1つが表示されます。私はspring mvcを使用しているので、フォーム作業を切り替える機能を入力/登録するときに欲しいです。残りのウェブサービスに入るときにJavaScript機能を切り替えるURL

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org"> 
<head> 
    <meta charset="UTF-8"/> 
    <title>Login Form</title> 

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" 
      href="../static/css/reset.css"/> 

    <link rel='stylesheet prefetch' 
      href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/> 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/> 

    <!--<link rel="stylesheet" href="../static/css/style.css"/>--> 
    <link rel="stylesheet" th:href="@{/css/style.css}" 
      href="../static/css/style.css"/> 


</head> 

<body> 


<!-- Mixins--> 
<!-- Pen Title--> 

<div class="container"> 
    <div class="card"></div> 
    <div class="card"> 
     <h1 class="title">Login</h1> 
     <form action="login" th:action="@{/login}" th:object="${login}" method="post" > 
      <div class="input-container"> 
       <input type="email" id="email" th:field="*{email}" required="required"/> 
       <label for="email">email</label> 
       <div class="bar"></div> 
      </div> 
      <div class="input-container"> 
       <input type="password" id="Password" th:field="*{password}" required="required"/> 
       <label for="Password">Password</label> 
       <div class="bar"></div> 
      </div> 
      <div class="button-container"> 
       <button type="submit" name="action" value="login"><span>Go</span></button> 
      </div> 
      <div class="footer"><a href="#">Forgot your password?</a></div> 
     </form> 
    </div> 
    <div class="card alt"> 
     <div class="toggle"></div> 
     <h1 class="title">Register 
      <div class="close"></div> 
     </h1> 
     <form action="register" th:action="@{/register}" th:object="${register}" method="post"> 
      <div class="input-container"> 
       <input type="text" id="firstName" th:field="*{firstName}" required="required"/> 
       <label for="firstName">First Name</label> 
       <div class="bar"></div> 
      </div> 

      <div class="input-container"> 
       <input type="text" id="lastName" th:field="*{lastName}" required="required"/> 
       <label for="lastName">Last Name</label> 
       <div class="bar"></div> 
      </div> 

      <div class="input-container"> 
       <input type="email" id="email_" th:field="*{email}" required="required"/> 
       <label for="email">Email</label> 
       <div class="bar"></div> 
      </div> 
      <div class="input-container"> 
       <input type="password" id="Password_" th:field="*{password}" required="required"/> 
       <label for="Password">Password</label> 
       <div class="bar"></div> 
      </div> 
      <div class="button-container"> 
       <button type="submit" name="action" value="register"><span>Next</span></button> 
      </div> 
     </form> 
    </div> 
</div> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

<script th:src="@{/js/index.js}"></script> 


</body> 
</html>

JavaScriptのコード：入力するときに、私は、たとえばたい

$('.toggle').on('click', function() { 
    $('.container').stop().addClass('active'); 
}); 

$('.close').on('click', function() { 
    $('.container').stop().removeClass('active'); 
});

/それはそれを行うには

出典

2016-06-14 Ibrahim Mohamed

GitHubのプロジェクト例は、この問題を理解するのに役立ちます。 –

OK、質問にコードを追加しました:) –

異なるアクションのエンドポイントを使用する2つのフォームがあります。ログインフォームは "/ login"エンドポイントを使用します。登録フォームは「/登録」エンドポイントを使用します。これはうまくいくはずです。あなたはどんな特定の問題を抱えていますか？ GitHubの完全な例が必要です。 –

一つの方法は、/登録を作成することである代わりに、ログインの登録フォームを取得登録パラメータを返すコントローラ：

@RequestMapping("/register") 
public ModelAndView register() { 
    ModelAndView mv = new ModelAndView("your_form_page") 
    mv.addObject("isRegister", true); 
    return mv; 
}

は、その後、あなたは隠しフィールドを追加し、divを切り替えるには、JavaScriptでそれを使用することができます：

<!DOCTYPE html> 
<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
    xmlns:th="http://www.thymeleaf.org"> 

    <head> 
     <!-- imports omitted --> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       if ($("#isRegister").val()) { 
        $("#register").show(); 
        $("#signUp").hide(); 
       } else { 
        $("#register").hide(); 
        $("#signUp").show(); 
       } 
      }); 
     </script> 


    </head> 

    <body> 
     <input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/> 


     <div id="signUp"> 
      Sign Up Form 
     </div> 
     <div id="register"> 
      Register Form 
     </div> 

    </body> 
</html>

もちろん、あなたの「の.js」ファイルにコードのJavascriptのピースを移動することができます。ここで重要なのは、Javascriptでアクセス可能な非表示の入力フィールドをDIVを切り替えることです。

出典

2016-06-16 12:25:15

ありがとうございました:) –

残りのウェブサービスに入るときにJavaScript機能を切り替えるURL

答えて

関連する問題