選択された内容によってフォームの内容を変更する

Question

前提・実現したいこと

JavaScriptとPHPでHTMLを操作して以下のようなフォームを実現したいのですがどう実現すればいいかわからずなやんでいます。

〇実現したいこと
form_typeの値によってtableのフォームの内容が変化する。
例えばform_type=1の時はテキストの入力フォームのみが生成される
form_type=6とform_type=7の場合の例も以下の通りです。

これの難しいのがテキスト、画像、動画に対応するフォームが７つ存在するところでJSの方でどのように操作すればいいか少しとっかかりづらくて難航しています。

お力添え（一言ヒントでも構いません）いただけると助かります。

以下のソースコードはform_type=7の時のhtmlです。

selectボックス選択後の想定html

<form  method="post" action="./insert.php" enctype="multipart/form-data">
    <p>
        <select name="form_type" id="">
            <option value="no_select">フォームタイプを選んで下さい</option>
            <option value="1">テキストのみ</option>
            <option value="2">画像のみ</option>
            <option value="3">動画のみ</option>
            <option value="4">テキストと画像</option>
            <option value="5">テキストと動画</option>
            <option value="6">画像と動画</option>
            <option value="7">全て</option>
        </select>
    </p>
    <table>
        <tr>
            <th></th>
            <th>テキスト</th>
            <th>動画ファイル</th>
            <th>画像ファイル</th>
        </tr>
        <?php for($i=1;$i<=7;$i++): ?>
            <tr>
                <th><?php echo $i; ?>つ目のデータ</th>
                <td><input type="text" name="text_<?php echo $i; ?>"></td>
                <td><input id="file" type="file" name="movie<?php echo $i; ?>"></td>
                <td><input id="file" type="file" name="img<?php echo $i; ?>"></td>
            </tr>
        <?php endfor; ?>
    </table>
</form>

Answer 1

jsでやりたいのかphpでやりたいのかちょっとわかりづらいですね
phpでやるならフォームは分けたほうがいいでしょう

<?PHP
$datas=[
  ["caption"=>"データ1","text"=>"","movie"=>"","img"=>""],
  ["caption"=>"データ2","text"=>"","movie"=>"","img"=>""],
  ["caption"=>"データ3","text"=>"","movie"=>"","img"=>""],
  ["caption"=>"データ4","text"=>"","movie"=>"","img"=>""],
  ["caption"=>"データ5","text"=>"","movie"=>"","img"=>""],
];
$t=filter_input(INPUT_GET,"form_type",FILTER_VALIDATE_INT);
if(is_null($t)) $t=7;
$flg=[
  "txt"=>in_array($t,[1,4,5,7]),
  "img"=>in_array($t,[2,4,6,7]),
  "mov"=>in_array($t,[3,5,6,7]),
  ];
?>
<form>
<select name="form_type" onchange="this.form.submit()">
<option value="1"<?=$t==1?" selected":""?>>テキストのみ</option>
<option value="2"<?=$t==2?" selected":""?>>画像のみ</option>
<option value="3"<?=$t==3?" selected":""?>>動画のみ</option>
<option value="4"<?=$t==4?" selected":""?>>テキストと画像</option>
<option value="5"<?=$t==5?" selected":""?>>テキストと動画</option>
<option value="6"<?=$t==6?" selected":""?>>画像と動画</option>
<option value="7"<?=$t==7?" selected":""?>>全て</option>
</select>
</form>
<form  method="post" enctype="multipart/form-data">
<table>
<tr>
<th></th>
<?=$flg["txt"]?"<th>テキスト</th>\n":"";?>
<?=$flg["mov"]?"<th>動画ファイル</th>\n":"";?>
<?=$flg["img"]?"<th>画像ファイル</th>\n":"";?>
</tr>
<?PHP
foreach($datas as $key=>$data){
$count=$key+1;
?>
<tr>
<th><?=$count?>つ目のデータ</th>
<?=$flg["txt"]?"<td><input type=\"text\" name=\"text_${count}\"></td>\n":"";?>
<?=$flg["mov"]?"<td><input type=\"file\" name=\"movie_${count}\"></td>\n":"";?>
<?=$flg["img"]?"<td><input type=\"file\" name=\"image_${count}\"></td>\n":"";?>
</tr>
<?PHP
}
?>
</table>
<input type="submit" value="send">
</form>

Comments

[yambejp]

この手の処理はビット演算でやると直感的です

[UpaZiro]

といった返信ありがとうございます。
JSで変化する部分の操作は行いたいと思っています。

具体的にはラジオボタンが押されたらJSでフォームを新たに形成する…といった考えでした。
この場合、入力値チェックでもう一度入力画面に戻ってきたときどのように画面を保持しようか…などの課題があり、困っている次第です。

言葉足らずで申し訳ありません汗