formのdisabled要素はsubmitされない

当たり前な話かも知れないが、知らなかったのでメモする。

私がやりたかったこと

フォーム要素は「Aドロップダウンリスト」と「Bテキストボックス」二つ。

仕様上、上記フォーム要素は関連があって、
Aドロップダウンリストから特定の要素を選択すると、Bテキストボックスの値に固定値０を埋める。

固定値なので、Bテキストボックスを非活性化し、ユーザーがいじれないようにしたい。

最後に送信ボタンを押すとAドロップダウンリストの選択肢とBテキストボックスの値を送信する。

しかし、

disabled 属性がついたフォーム要素は、submit送信されなかった。

解決方法

disabledの代わりにreadonlyを使う

例

<input type="text" name="B" id="B">
<script>
  ...
  // Aドロップダウンリストから特定の要素を選択したとき
  document.getElementById("B").value = "0";
  document.getElementById("B").readOnly = true;
  ...
</script>

hiddenのinputを追加する

例

<input type="text" id="B">
// ドロップダウンリストから特定の要素を選択したとき
<script>
  ...
  // Aドロップダウンリストから特定の要素を選択したとき
  document.getElementById("B").value = "0";
  document.getElementById("B").disabled = true;
  ...
</script>
<script>
  // フォーム送信時にhiddenのinputを追加
  document.getElementById("myForm").addEventListener("submit", function(event) {
    var hiddenInput = '<input type="hidden" name="B" value="0">';
    document.getElementById("myForm").insertAdjacentHTML('beforeend', hiddenInput);
  });
</script>

ユーザーにはdisabledで編集不可のテキストボックスを見せて実際の値はhiddenのinputで送信する。

JavaScriptで送信前にdisabledを解除

例

<input type="text" id="B" name="B">
// ドロップダウンリストから特定の要素を選択したとき
<script>
  ...
  // Aドロップダウンリストから特定の要素を選択したとき
  document.getElementById("B").value = "0";
  document.getElementById("B").disabled = true;
  ...
</script>
<script>
  // フォーム送信時にdisabledを解除
  document.getElementById("myForm").addEventListener("submit", function(event) {
    // Bテキストボックスのdisabled属性を解除
    document.getElementById("B").disabled = false;
  });
</script>

固定値おならバックエンドで処理してもOK

####（　・。。・　）🖐

間違っている内容がありましたら、教えて頂ければ喜びます。