「JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト」というサイトを参考に、お問い合わせフォームの選択項目表示切り替えを実装しようとしているのですが、一部の項目だけjavascriptが機能せずに表示が切り替わりません。プログラミングかつjavascript初心者です。ヘルプお願い致します。
Ruby
1<%= form_for(resource, as: resource_name, url: users_sign_up_confirm_path) do |f| %> 2 <%= devise_error_messages! %> 3 <div class="profile_edit"> 4 <div class="profile_info_edit"> 5 <h2><i class="fa fa-user-o fa-fw fa-lg" aria-hidden="true"></i>会員登録</h2> 6 7 <div class="field"> 8 <%= f.label :classification, "個人または法人" %><br /> 9 <%= f.select :classification, options_for_select([["個人", "select1"], ["法人", "select2"]]), {:onchange =>"entryChange();"}, id: "changeSelect" %> 10 </div> 11 <div class="field"> 12 <%= f.label :username, "名前" %><br /> 13 <%= f.text_field :username, autofocus: true %> 14 </div> 15 <div class="field"> 16 <%= f.label :userkana, "ふりがな" %><br /> 17 <%= f.text_field :userkana, autofocus: true %> 18 </div> 19 <div class="field"> 20 <%= f.label :email, "メールアドレス" %><br /> 21 <%= f.text_field :email, autofocus: true %> 22 </div> 23 <div class="field"> 24 <%= f.label :password, "パスワード" %><br /> 25 <%= f.password_field :password, autofocus: true %> 26 </div> 27 <div class="field" id="firstBox"> 28 <%= f.label :address_postal, "郵便番号" %><br /> 29 <%= f.text_field :address_postal, autofocus: true %> 30 </div> 31 <div class="field"> 32 <%= f.label :address_prefecture, "都道府県" %><br /> 33 <%= f.text_field :address_prefecture, autofocus: true %> 34 </div> 35 <div class="field"> 36 <%= f.label :address_city, "市区町村" %><br /> 37 <%= f.text_field :address_city, autofocus: true %> 38 </div> 39 <div class="field"> 40 <%= f.label :address_block, "番地" %><br /> 41 <%= f.text_field :address_block, autofocus: true %> 42 </div> 43 <div class="field"> 44 <%= f.label :address_building, "建物" %><br /> 45 <%= f.text_field :address_building, autofocus: true %> 46 </div> 47 <div class="field"> 48 <%= f.label :number, "電話番号" %><br /> 49 <%= f.text_field :number, autofocus: true %> 50 </div> 51 <div class="field" id="firstBox"> 52 <%= f.label :birthday, "生年月日" %><br /> 53 <%= f.date_field :birthday, autofocus: true %> 54 </div> 55 <div class="button_wrapper"> 56 <%= f.submit "確認する", :class => "button button2 actions" %> 57 </div> 58 <% end %> 59 60 </div> 61 62 </div>
javascript
1<script type="text/javascript"> 2function entryChange(){ 3 if(document.getElementById('changeSelect')){ 4 id = document.getElementById('changeSelect').value; 5 6 if(id == 'select1'){ 7 //フォーム 8 document.getElementById('firstBox').style.display = "inline"; 9 document.getElementById('secondBox').style.display = "none"; 10 11 }else if(id == 'select2'){ 12 //フォーム 13 document.getElementById('firstBox').style.display = "none"; 14 document.getElementById('secondBox').style.display = "inline"; 15 16 } 17 } 18 } 19 20 window.onload = entryChange; 21</script>
最初のチェックボックス「個人」「法人」を選択したあとに、例えば郵便番号は表示が切り替わりますが、生年月日は切り替わらないという問題が起きています。
ご回答お願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/20 07:18