動的Webフォームの非表示領域のdisabled化について

Question

前提・実現したいこと

Selectした内容によって動的に入力項目が変わるWebフォームを作ろうとしています。
最初にSelectした項目に合わせてそれ以降のフォームを変更したいと考えていますが、一部は共通項目であり、
最初に選んだ項目によって必須か必須でないかが異なります。

質問の内容

JavaScriptでgetElementsByClassNameとgetElementByIdを組み合わせ、無関係の項目をdisplay = none;で非表示にしました。

ここまでは意図通りだったのですが、INPUT項目にRequiredを付与したところ、
非表示になっている項目が未入力と判定されてsubmit出来なくなりました。

恐らく非表示になっている領域がdisabledになっていないのが原因だと考えていますが、
上手くdisabledに出来ません。ここを上手く解決する方法は無いでしょうか。

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

- submitボタンを押してもPOSTされない
- submitボタン押下後、別の項目を選択すると入力エリアが赤くなっている(可視エリアで入力せず「このフィールドは入力必須です」が出た後も赤くなります)

該当のソースコード

	<form name="form1" action="#" method="post">
		<div class="pulldownset products">
			<select class="mainselect" name="products_name">
				<option value="">Select</option>
				<option value="Products_A">製品A</option>
				<option value="Products_B">製品B</option>
				<option value="Products_C">製品C</option>
			</select><br>
			
			<p id="Products_A" class="subbox">
			Start date　<input type="date" name="StartDate" required> : <span style="color:#FF5555"><span style="color:#FF5555">必須</span></span><br>
			Expire date　<input type="date" name="ExpireDate" required> : <span style="color:#FF5555">必須</span><br>
			</p>
			
			<p id="Products_B" class="subbox">
			Start date　<input type="date" name="StartDate"><br>
			Expire date　<input type="date" name="ExpireDate" required> : <span style="color:#FF5555">必須</span><br>
			</p>
				
			<p id="Products_C" class="subbox">
			Start date　<input type="date" name="StartDate"><br>
			Expire date　<input type="date" name="ExpireDate"><br>
			</p>

			<input type="submit" value="go" method="post">

		</div>
	</form>



	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', function() {
			var allSubBoxes = document.getElementsByClassName("subbox");
			for( var i=0 ; i<allSubBoxes.length ; i++) {
				allSubBoxes[i].style.display = 'none';
				allSubBoxes[i].disabled = true;　//a
			}

			var mainBoxes = document.getElementsByClassName('pulldownset');
			for( var i=0 ; i<mainBoxes.length ; i++) {

				var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
				mainSelect[0].onchange = function () {
					var subBox = this.parentNode.getElementsByClassName("subbox");	
					for( var j=0 ; j<subBox.length ; j++) {
						subBox[j].style.display = 'none';
						subBox[j].disabled = true;　//a
					}

					if( this.value ) {
						var targetSub = document.getElementById( this.value );	
						targetSub.style.display = 'inline';
						targetSub.disabled = false;　//a
					}	
				}
			}
		});
	</script>

試したこと

• それぞれのINPUTにclass="subbox"を指定してみる ->NG
• 全てのgetElementsByClassNameをgetElementByIdに変えてみる ->Selectとの連携がよくわからなくなり挫折
• requiredを消して動作するかの確認 -> する

その他

Javascript部分は以下URLを参考にさせて頂きました。
https://allabout.co.jp/gm/gc/23955/

Answer 1

若干classとidの使い方が微妙ですが、こんな感じでどうでしょうか？

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', ()=>{
  const changeMainSelect=()=>{
    var v=document.querySelector(".mainselect").value;
    [].forEach.call(document.querySelectorAll(".subbox"),x=>{;
      var flg=x.getAttribute('id')==v;
      x.style.display = flg?'':'none';
    });
    [].forEach.call(document.querySelectorAll(".subbox input"),x=>{;
      var flg=v?x.closest("#"+v):false;
      x.disabled=!flg;
    });
  }
  changeMainSelect();
  document.querySelector(".mainselect").addEventListener('change',()=>{
    changeMainSelect();
  });
});
</script>
<form name="form1" action="#" method="post">
<div class="pulldownset products">
<select class="mainselect" name="products_name">
<option value="">Select</option>
<option value="Products_A">製品A</option>
<option value="Products_B">製品B</option>
<option value="Products_C">製品C</option>
</select><br>

<p id="Products_A" class="subbox">
Start date　<input type="date" name="StartDate" required> : <span style="color:#FF5555"><span style="color:#FF5555">必須</span></span><br>
Expire date　<input type="date" name="ExpireDate" required> : <span style="color:#FF5555">必須</span><br>
</p>

<p id="Products_B" class="subbox">
Start date　<input type="date" name="StartDate"><br>
Expire date　<input type="date" name="ExpireDate" required> : <span style="color:#FF5555">必須</span><br>
</p>

<p id="Products_C" class="subbox">
Start date　<input type="date" name="StartDate"><br>
Expire date　<input type="date" name="ExpireDate"><br>
</p>

<input type="submit" value="go" method="post">
</div>
</form>

Comments

[babysonfire]

ご回答ありがとうございました。色々な実現方法があるのですね。
勉強になりました。

Answer 2

disableをpタグに対して設定しています。
inputタグに対して設定しないと想定通りの動きとなりません。

一旦既存のコードを修正しました。
修正箇所はコメントで記載しています。
今回は行なっていませんが似たような処理がいくつも存在しているので関数にまとめた方がコードがスッキリします。

<script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var allSubBoxes = document.getElementsByClassName("subbox");
            for( var i=0 ; i<allSubBoxes.length ; i++) {
                allSubBoxes[i].style.display = 'none';
            }
            // inputタグに対してdisabledを設定
            var allSubBoxes = document.getElementsByName("StartDate");
            for( var i=0 ; i<allSubBoxes.length ; i++) {
                allSubBoxes[i].disabled = true;
            }
            var allSubBoxes = document.getElementsByName("ExpireDate");
            for( var i=0 ; i<allSubBoxes.length ; i++) {
                allSubBoxes[i].disabled = true;
            }

            var mainBoxes = document.getElementsByClassName('pulldownset');
            for( var i=0 ; i<mainBoxes.length ; i++) {

                var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
                mainSelect[0].onchange = function () {
                    var subBox = this.parentNode.getElementsByClassName("subbox");
                    for( var j=0 ; j<subBox.length ; j++) {
                        subBox[j].style.display = 'none';
                    }
                    // inputタグに対してdisabledを設定
                    var subBox = this.parentNode.getElementsByClassName("StartDate");
                    for( var j=0 ; j<subBox.length ; j++) {
                        subBox[j].disabled = true;
                    }
                    var subBox = this.parentNode.getElementsByClassName("ExpireDate");
                    for( var j=0 ; j<subBox.length ; j++) {
                        subBox[j].disabled = true;
                    }

                    if( this.value ) {
                        var targetSub = document.getElementById( this.value );    
                        targetSub.style.display = 'inline';
                        // inputタグに対してdisabledを設定
                        var inputTags = targetSub.getElementsByTagName("input");
                        for( var j=0 ; j<inputTags.length; j++) {
                          inputTags[j].disabled = false;
                        }
                    }    
                }
            }
        });
    </script>

Comments

[babysonfire]

何故pなんだろうと思ったら、私のgetElementsByClassNameの理解が足りていなかったみたいです。
その辺のご指摘含め誠にありがとうございます。
大変勉強になりました。