質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1837閲覧

javascriptを使ってチェックボックスの選択項目によってフォーム内容を変更したいけど一部が変化しない

shashamo

総合スコア11

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/11/20 04:27

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

最初のチェックボックス「個人」「法人」を選択したあとに、例えば郵便番号は表示が切り替わりますが、生年月日は切り替わらないという問題が起きています。
ご回答お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

id="secondBox"の要素が提示されているソースコードにないので、実行時にエラーになってると思われますが。。。

投稿2017/11/20 04:56

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shashamo

2017/11/20 07:18

ご回答ありがとうございます。id名をそれぞれ変えて実行したところ動くようになりました。ありがとうございました。
guest

0

ベストアンサー

idがユニークに振られていないからではないでしょうか?
グルーピングして処理するならclassやdata-*で属性をつけて
querySelectorAllなどで処理するとよいでしょう

投稿2017/11/20 04:39

yambejp

総合スコア114779

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shashamo

2017/11/20 07:19

ご回答ありがとうございます。教えていただいたとおりidをユニークにふることで解決いたしました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問