入力フォームの動的追加

前提・実現したいこと

セレクトボックスの値に応じて入力フォーム欄を増やしたいです。

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

プログラム初学者です。
html,CSS,PHP,JavaScript,Botstrap4などを使って入力フォームを制作しています。
セレクトボックスで値(1,2,3)を選択すると、それに応じて入力フォーム欄が(6,12,18)個に
増えるようにしたいです。

http://mitsuakikawamorita.com/blog/?p=254
を参考にしてはみましたが、セレクトボックスの選択肢に連動して出現させることが出来ません。
また、requiredにした別のフォームが邪魔でスムーズにフォームを追加出来ません。


ご助力いただけませんでしょうか。
よろしくお願いいたしします。

該当のソースコード

 <dt>セレクトボックス<input type="button" value="Get ">
                <select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </dt>
        
            <dd>
                <table border="1" width="100%"  bgcolor="#fff">
                    <tr class="Minfo_input">
                        <td>AAA</td>
                        <td>BBB</td>
                        <td>CCC</td>
                        <td>DDD</td>
                        <td>EEE</td>
                        <td>FFF</td>
                    </tr>
                    <tr>
                        <td><input type="text" id="Minfo1" size="6"></td>
                        <td><input type="text" id="Minfo2" size="6"></td>
                        <td><input type="text" id="Minfo3" size="6"></td>
                        <td><input type="text" id="Minfo4" size="6"></td>
                        <td><input type="text" id="Minfo5" size="6"></td>
                        <td><input type="text" id="Minfo6" size="6"></td>
                    </tr>
                </table>
            </dd>

試したこと

http://mitsuakikawamorita.com/blog/?p=254
を参考にセレクトボックスと連動させようとしましたが、上手く出来ませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2019/08/02 09:00

提示されているコードは何もされていないhtmlだけですのでご自身が組まれたJavaScriptのコードをご提示ください。

yasu0716

2019/08/06 01:55

色々と試す中で上手くいかなかったものは消してしまいました。すみませんが、再現できません。 http://mitsuakikawamorita.com/blog/?p=254 を参考にした、との記録は残しているのですが…。ご回答、大変ありがとうございました。

m.ts10806

2019/08/06 02:08

こちらは回答ではなく質問への追記修正依頼のコメント欄です。「何をしてできなかったか」を残しておくと後から同様の現象に出くわしたときにそこを避けるところから始められるので有用かとは思いますけど・・・。むしろ質問に必要なのは「現在のできてないコード」です。

kei344

2019/08/06 02:59

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

yasu0716

2019/08/23 02:03

m.ts10806さんコメントありがとうございます。コーディングを頻繁に行う人は没コードも沢山保存しているものなのでしょうか。経験を積むにつれ不必要になるのでしょうが…。

yasu0716

2019/08/23 02:04

kei344さんご指摘ありがとうございます。

m.ts10806

2019/08/23 02:11

>コーディングを頻繁に行う人は没コードも沢山保存しているものなのでしょうか。いえ、そういうことではなく、質問に提示するのは「試したけどできなかったコード」というだけのことです。 https://teratail.com/help/question-tips#questionTips3-5 >3-5. あなたが何をしたかを書きましょう >あなたがしたことを最も具体的に示すものはプログラムのソースコードです。

yasu0716

2019/08/23 02:29

分かりました。以後、失敗を残して質問するようにします。ありがとうございます。

m.ts10806

2019/08/23 02:35

残して、というか「できてない今のコードそのまま」提示してもらったらそれで良いです。むしろ「できないものを全て捨てる」ということは中々なくて「できてないものを提示してアドバイスによってできるようにする」のがこの手の質問サイトだと思うので、質問する際には「今自分が残している問題が起きるコードの最終版」くらいは問題解決まで持っておいて良いのではと。これがダメあれがダメで捨てていくと何も残らないですし、できたものさえ身につかなくなります。（コピペコードくださいとなると質問ではなく作業依頼です）

m.ts10806

2019/08/23 02:36

ガイドライン読んでもらえると分かりますが「試したこと」「調べたこと」をしっかり書くことで良い質問になり、的確な回答も得られやすくなります。「～～ということをやってみた。だが～～～という現象が起きてやりたいことが実現できなかった。なので、～～～ということもやってみた（以下略）」という書き方が理想です。回答者も答えやすくなります。

yasu0716

2019/08/23 02:46

丁寧にありがとうございます。正に、試しては消して試しては消してで、上手くいかないときには何も残らない状態でした。

m.ts10806

2019/08/23 02:51

それに「自分が試したコード」はおおよそ「自分が理解できているコード」になります。 yambejpのコードは難易度は決して低くないコードです（むしろ高い）理解できていないコードのまま使い続けるリスクは高いですし、「改修・機能追加したい」となったときにできるか？という問題があります。そこでやってみて「できなかった」→「捨てる」となるともらった回答すら無駄になってしまいますよね。はじめのうちは「もらった回答を参考に自分のコードに書き直す」ほうが自身の学習のためにもなると思います。繰り返すようになりますが、できたコードをもらって満足して終わるサイトではないので。

yasu0716

2019/08/23 07:05

分からないコードを分からないまま貼って使っていることへの不安はありました。ちゃんと理解し、身につけていきたいと思います。ご教授いただきありがとうございます。

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

回答1件

ベストアンサー

ほんとに増やす必要があるかどうかを検討したほうがよいでしょう。
増やすのではなく隠しておくほうが処理は楽です。

javascript
1<script>
2HTMLElement.prototype.trigger=function(eventStr){
3    var e = document.createEvent("HTMLEvents");
4    e.initEvent(eventStr, true, true );
5    return this.dispatchEvent(e);
6};
7
8window.addEventListener('DOMContentLoaded', ()=>{
9  document.querySelector("#s1").addEventListener('change',e=>{
10    var v=e.target.value;
11    [].forEach.call(document.querySelectorAll("r2,.r3"),x=>{
12      var flg=x.classList.contains(v);
13      x.style.display=flg?"table-row":"none";
14      [].forEach.call(x.querySelectorAll('input'),y=>{
15        y.disabled=!flg;
16      });
17    });
18  });
19  document.querySelector("#s1").trigger('change');
20});
21</script>
22<form>
23<dt>セレクトボックス<input type="button" value="Get ">
24<select id="s1">
25<option value="r1">1</option>
26<option value="r2">2</option>
27<option value="r3">3</option>
28</select>
29</dt>
30<dd>
31<table border="1" width="100%"  bgcolor="#fff">
32<tr class="Minfo_input r1 r2 r3">
33<td>AAA</td>
34<td>BBB</td>
35<td>CCC</td>
36<td>DDD</td>
37<td>EEE</td>
38<td>FFF</td>
39</tr>
40<tr class="r1 r2 r3">
41<td><input type="text" size="6" name="t00"</td>
42<td><input type="text" size="6" name="t01"></td>
43<td><input type="text" size="6" name="t02"></td>
44<td><input type="text" size="6" name="t03"></td>
45<td><input type="text" size="6" name="t04"></td>
46<td><input type="text" size="6" name="t05"></td>
47</tr>
48<tr class="Minfo_input r2 r3">
49<td>AAA</td>
50<td>BBB</td>
51<td>CCC</td>
52<td>DDD</td>
53<td>EEE</td>
54<td>FFF</td>
55</tr>
56<tr class="r2 r3">
57<td><input type="text" size="6" name="t10"</td>
58<td><input type="text" size="6" name="t11"></td>
59<td><input type="text" size="6" name="t12"></td>
60<td><input type="text" size="6" name="t13"></td>
61<td><input type="text" size="6" name="t14"></td>
62<td><input type="text" size="6" name="t15"></td>
63</tr>
64<tr class="Minfo_input r3">
65<td>AAA</td>
66<td>BBB</td>
67<td>CCC</td>
68<td>DDD</td>
69<td>EEE</td>
70<td>FFF</td>
71</tr>
72<tr class="r3">
73<td><input type="text" size="6" name="t20"></td>
74<td><input type="text" size="6" name="t21"></td>
75<td><input type="text" size="6" name="t22"></td>
76<td><input type="text" size="6" name="t23"></td>
77<td><input type="text" size="6" name="t24"></td>
78<td><input type="text" size="6" name="t25"></td>
79</tr>
80</table>
81</dd>
82<input type="submit" value="send">
83</form>