ガイドとゲストのマッチングサイトの登録画面を作っています。
ガイドとゲストは途中まで共通フォームで新規登録→ボタンによって分岐
これをjsで動かしたいのですがうまくいきません。
new.html.erb
<head> <meta charset="utf-8"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <tbody> <section class = "regi-form"> <%= form_for @g_info do |f| %> <section id ="common-form"> <div class ="myinfo-label">Please enter your E-mail address.</div> <%= f.email_field :email, :class => 'myinfo', :placeholder => 'E-mail' %><section id ="guide-form"><!ガイド登録画面> <div class = "myinfo-label">One message(max 700 words)</div> <%= f.text_field :message, :class =>'myinfo'> <div id ="resiback">Back</div> </section> <section id ="guest-form"><!ゲスト登録画面> <div id ="resiback">Back</div> </section><btn id ="regi-btn-guest">Register as a GEST</btn><!ゲスト登録画面へ切り替え> <btn id ="regi-btn-guide">Register as a GUIDE</btn><!ガイド登録画面へ切り替え> </section>
<%= link_to f.submit :class => "regi-btn" %>
<% end %>
</section> </div> </tbody>Javascript
$(document).on('turbolinks:load', function(){
$('#guide-form').hide();
$('#guest-form').hide();
$('#resi-btn-guide').on('click', function(){
$('#common-form').hide();
$('#guide-form').show();
});
$('#resi-btn-guest').on('click', function(){
$('#common-form').hide();
$('#guest-form').show();
});
$('#resiback').on('click', function(){
$('#guide-form').hide();
$('#guest-form').hide();
$('#common-form').show();
});
});
あなたの回答
tips
プレビュー