よくあるフォームで、「その他」を選択した時だけ、テキストボックスに入力ができるようにしたい

実現したいこと

フォームを作成していて、selectタグで複数の選択肢があり、
「その他」という選択肢を選んだ場合のみ、input type=text に文字を書けるようにしたいです。

前提

作成に使っているのは、「index.php」「confirm.php」「thanks.php」「submit.php」で構成しています。
今回その他の選択肢を含む項目が二つあり、下記のようにindex.phpを記述するとうまく挙動自体はしています。

発生している問題・エラーメッセージ

ですが、基本的に「class」とは違い「id」は被ってはいけないものであるはずなのですが、
「id」を別の名前にすると挙動がおかしくなってしまいます。
具体的なコードは下記に記載させていただきます

該当のソースコード

<dl>
<dt>
<p>Q1.一つ目の質問です</p>
</dt>
<dd class="q_01">
<select class="" name="q1" id="customerno" onchange="myfunc()">
<option>お選び下さい。</option>
<option value="選択肢01">選択肢01</option>
<option value="選択肢02">選択肢02</option>
<option value="選択肢03">選択肢03</option>
<option value="選択肢04">選択肢04</option>
<option value="選択肢05">選択肢05</option>
<option value="選択肢06">選択肢06</option>
<option value="選択肢07">選択肢07</option>
<option value="その他">その他</option>
</select>
<p class="other_notes"><span>※上記その他をご選択の場合は以下にご入力ください。</span>
<input type="text" id="customerno02" name="q1_other" value="" class="disselect" disabled>
</p>
</dd>
<script>
function myfunc() {
let elements = document.getElementsByClassName("disselect");
let len = elements.length;
var sele_val = document.getElementById("customerno").value;
if(sele_val === "その他") {
// disabled属性を削除
for (let i = 0; i < len; i++){
elements.item(i).removeAttribute("disabled");
}
}else {
// disabled属性を設定
for (let i = 0; i < len; i++){
elements.item(i).setAttribute("disabled", true);
}
}
}
</script>
</dl>


<dl>
<dt>
<p>Q2.二つ目の質問です</p>
</dt>
<dd class="q_02">
<select class="" name="q2" id="customerno" onchange="myfunc()">
<option>お選び下さい。</option>
<option value="選択肢01">選択肢01</option>
<option value="選択肢02">選択肢02</option>
<option value="選択肢03">選択肢03</option>
<option value="選択肢04">選択肢04</option>
<option value="選択肢05">選択肢05</option>
<option value="選択肢06>選択肢06</option>
<option value="選択肢07">選択肢07</option>
<option value="選択肢08">選択肢08</option>
<option value="選択肢09">選択肢09</option>
<option value="選択肢10">選択肢10</option>
<option value="その他">その他</option>
</select>
<p class="other_notes"><span>※上記その他をご選択の場合は以下にご入力ください。</span>
<input type="text" id="customerno03" name="q2_other" value="" class="disselect" disabled>
</p>
<script>
function myfunc() {
let elements02 = document.getElementsByClassName("disselect");
let len02 = elements02.length;
var sele_val02 = document.getElementById("customerno").value;
if(sele_val02 === "その他") {
// disabled属性を削除
for (let i = 0; i < len02; i++){
elements02.item(i).removeAttribute("disabled");
}
}else {
// disabled属性を設定
for (let i = 0; i < len02; i++){
elements02.item(i).setAttribute("disabled", true);
}
}
}
</script>
</dl>

試したこと

現状のコードで挙動自体は動いているのですが、
<select class="" name="q1" id="customerno" onchange="myfunc()">
<input type="text" id="customerno02" name="q2_other" value="" class="disselect" disabled>
var sele_val = document.getElementById("customerno").value;
本来であれば、上記3つの部分のidが全て同じでないといけないのかなと思っております。

なので、一つ目の項目の時は、下記のように「customerno02」で統一させ
<select class="" name="q1" id="customerno02" onchange="myfunc()">
<input type="text" id="customerno02" name="q2_other" value="" class="disselect" disabled>
var sele_val = document.getElementById("customerno02").value;

二つ目の項目の時は下記のように「customerno03」で統一させました
<select class="" name="q2" id="customerno03" onchange="myfunc()">
<input type="text" id="customerno03" name="q2_other" value="" class="disselect" disabled>
var sele_val02 = document.getElementById("customerno03").value;

すると、一つ目の項目で「その他」を選択したにも関わらず、
disabled属性を削除されず、「その他」のテキストが記入できなくなりました。
※ちなみに二つ目の項目の「その他」は上記のidで統一させれも通常通り記入でき、
二つ目の項目の「その他」を選択してから、一つ目の項目に戻って、その他を選択すると
一つ目もその他の記入ができるようになります。

なにかの記述が被っているため、下に書いた二つ目が優先され、一つ目が効かなくなっているのかなと
考えているのですが、解決方法がよくわかりません。

お分かりになる方、いらっしゃいましたら、教えていただけますと幸いです。
よろしくお願いいたします。

yambejp

2023/07/18 06:18

いずれにしてもidが被っているものは許容されませんまたPHPというよりjavascriptメインの質問なのでタグ付けしておいてください

masatamu

2023/07/18 06:21 編集

ありがとうございます。タグ追加させていただきました。 script内の記述が問題なのでしょうか？

行動規範の内容に同意します

回答2件

同じ構造でQ&Aを設定しているのであれば相対処理をすればidは不要です

javascript
1<script>
2function myfunc() {
3  const target=event.target;
4  const other=target.closest('dd').querySelector('p input');
5  other.disabled=target.value!="その他";
6  
7}
8</script>
9
10<dl>
11<dt>
12<p>Q1.一つ目の質問です</p>
13</dt>
14<dd class="q_01">
15<select class="" name="q1" onchange="myfunc()">
16<option>お選び下さい。</option>
17<option value="選択肢01">選択肢01</option>
18<option value="選択肢02">選択肢02</option>
19<option value="選択肢03">選択肢03</option>
20<option value="その他">その他</option>
21</select>
22<p class="other_notes"><span>※上記その他をご選択の場合は以下にご入力ください。</span>
23<input type="text" name="q1_other" value="" class="disselect" disabled>
24</p>
25</dd>
26</dl>
27
28<dl>
29<dt>
30<p>Q2.二つ目の質問です</p>
31</dt>
32<dd class="q_02">
33<select class="" name="q2" onchange="myfunc()">
34<option>お選び下さい。</option>
35<option value="選択肢01">選択肢01</option>
36<option value="選択肢02">選択肢02</option>
37<option value="選択肢03">選択肢03</option>
38<option value="その他">その他</option>
39</select>
40<p class="other_notes"><span>※上記その他をご選択の場合は以下にご入力ください。</span>
41<input type="text" name="q2_other" value="" class="disselect" disabled>
42</p>
43</dl>

投稿2023/07/18 06:45

yambejp

総合スコア117682

masatamu

2023/07/18 06:49

ご回答ありがとうございます！同じ構造であれば区別のためのidは不要なのですね、、

行動規範の内容に同意します

ベストアンサー

<select> と <input> の id 属性と onchange 属性は消して、以下のような<script>でいいでしょう。<select> から change イベントが発行されたら、共通の親を持つ class="disselect" を探して、その disabled 状態を変更します。

js
1document.addEventListener('change', e => {
2  const dd = e.target.closest('dd');
3  if (dd && e.target.tagName == 'SELECT') {
4    dd.querySelector('.disselect').disabled = e.target.value != "その他";
5  }
6});