onChange()でselectの選択内容によって次に出現するフォーム部品を条件分岐させたいのですが、なぜかスマホでうまくいきません。

Question

フォームでselect要素の内容によって
次のフォーム部品を条件分岐させたいと思うのですが、
なぜかスマホでうまく挙動しません。

<form id="form" action="test.php" method="post">
　<div class="form-group">
　　　<p class="form-title">ご連絡方法</p>
　　　　　<span class="select-area">
　　　　　　　<select name="ご連絡方法" id="select" class="validate[required]" onChange="changeSelect();">
　　　　　　　　　<option>選択してください</option>
　　　　　　　　　<option value="メールアドレス">メールアドレス</option>
　　　　　　　　　<option value="LINE">LINE</option>
　　　　　　　　　<option value="Facebook">Facebook</option>
　　　　　　　</select>
　　　　　</span>
　</div>
</form>
<div class="form-group form-select form0">
　　<p class="form-title">ご連絡先</p>
　　<input type="text" name="ご連絡先" placeholder="ご連絡先をご入力ください" class="validate[required]">
</div>
<div class="form-group form-select form1">
　　<p class="form-title">ご連絡先</p>
　　<input type="text" name="ご連絡先" placeholder="メールアドレス" class="validate[required]">
</div>
<div class="form-group form-select form2">
　　<p class="form-title">ご連絡先</p>
　　<input type="text" name="ご連絡先" placeholder="LINEID" class="validate[required]">
</div>
<div class="form-group form-select form3">
　　<p class="form-title">ご連絡先</p>
　　<input type="text" name="ご連絡先" placeholder="FBアカウント" class="validate[required]">
</div>

function changeSelect(){
  $('.form-select').css('display', 'none');

  var selectVal = $('#select').val();
  if(selectVal == 'メールアドレス'){
    $('.form0').css('display', 'block');
  }else if(selectVal == 'LINE'){
    $('.form1').css('display', 'block');
  }else if(selectVal == 'Facebook'){
    $('.form2').css('display', 'block');
  }else{
    $('.form0').css('display', 'block');
  }
}

こちらがonChange()を用いたもので、

$('#select').on('change', function(){
  $('.form-select').css('display', 'none');

  var selectVal = $('#select').val();
  if(selectVal == 'メールアドレス'){
    $('.form1').css('display', 'block');
  }else if(selectVal == 'LINE'){
    $('.form2').css('display', 'block');
  }else if(selectVal == 'Facebook'){
    $('.form3').css('display', 'block');
  }else{
    $('.form0').css('display', 'block');
  }
});

こちらがchange()を用いたものです。

上のselectでメールアドレス、LINE、FBの選んだものに合わせてplaceholderの文字を変えたいと思い、チャレンジして、PC上では変化するのですが、スマホだと変化しません。。

上記二つともうまくいきませんでした。。

どなたかお分かりの方いらっしゃいましたら教えていただけると幸いです。。

Comments

[m.ts10806]

スマートフォンの機種、利用しているブラウザなどの環境情報もご提示ください。また、そもそもchangeイベントが発生しているかどうか、alert()やconsole.log()などで確認した結果も教えてください。

[ShunYoshizawa]

ご回答ありがとうございます！MacのChromeで確認したところ上のchangeSelect()はイベントがきちんと動いていたのですが、下のchangeイベントは動いていませんでした。また、スマホではiphoneでsafari、Chromeで動きませんでした。

[m.ts10806]

changeSelect()とchangeは同居させないほうが良いと思います。どちらかだけにしてみてください。あとは、idをselectから変えてみる、ご連絡先の入力フォームをclassではなくidを与えて指定してみる、ご連絡先の入力フォームを1つにしてplaceholderだけを書き換える　を試してみてください。

[m.ts10806]

「ご連絡先の入力フォームを1つにしてplaceholderだけを書き換える」やり方に転換する方が現実的かもしれません。同じnameのinputが置いてあるのは好ましくありませんし。

[m.ts10806]

これ、回答のほうが良いですね。回答にうつします。

Answer 1

私のほうがスマホですぐ確認できる環境がないので検証はできませんが
下記、確認してください。

• changeSelect()とchangeは同居させないほうが良い。
  どちらかだけにすること（同じ処理内容ですし）
• idをselectから変えてみる
  あまり関係ないとは思いますが、IDは特になるべくきちんと意味や役割を加味した名前のほうが望ましいです。
• ご連絡先の入力フォームをclassではなくidを与えて指定してみる
  理由としては↑のselectと同じ理由です。
• ご連絡先の入力フォームを1つにしてplaceholderだけを書き換える
  同じnameのinputが置いてあるのは好ましくありません

↓placeholderだけを書き換えるサンプル

<select name="ご連絡方法" id="select" class="validate[required]">
 <option>選択してください</option>
 <option value="メールアドレス">メールアドレス</option>
 <option value="LINE">LINE</option>
 <option value="Facebook">Facebook</option>
</select>
～～～

<div class="form-group form-select">
 <p class="form-title">ご連絡先</p>
 <input type="text" name="ご連絡先" id="contact_input" placeholder="ご連絡先をご入力ください" class="validate[required]" />
</div>

$(function(){
    $('#select').on('change', function(){
        $("#contact_input").attr("placeholder",$(this).val());
    });
});