jQueryで動的にフォームにhiddenのフィールドを追加する方法

こんにちは、さるまりんです。

HTMLフォームのチェックボックスはオフの時は値が送信されません。
処理の際にはどれがオンでどれがオフか知りたい時があります。

これをjQueryを使って、動的にフォームに要素を追加して送信します。

こんなフォームがあります。

それぞれのcheckboxはlikeの名前でvalueに果物の名前を持っています。
「回答する」ボタンをクリックしたときにlikes[]の配列にオンのものnotlikesの配列にオフのものをそれぞれ詰めて送信したいです。

まずはHTMLはこんな感じです。

<ul>
  <li><input type="checkbox" name="like" class="like-check" value="apple">りんご</li>
  <li><input type="checkbox" name="like" class="like-check" value="strawberry">いちご</li>
  <li><input type="checkbox" name="like" class="like-check" value="grape">ぶどう</li>
  <li><input type="checkbox" name="like" class="like-check" value="peach">ピーチ！</li>
</ul>
<button id="the-botton">回答する</button>
<form id="the-form" method="POST"></form>

処理するJavaScriptはこうなります。

// 「回答する」ボタンを押した時
$("#the-botton").click(function() {

  // class like-checkのついたチェックボックスにたいして
  for(check of $('.like-check')) {
    // チェックが入っていたらlikes、それ以外はnotlikesとして
    var hidden_name = check.checked ? 'likes[]' : 'notlikes[]';
    // チェックボックスのvalueを
    var hidden_value = check.value;
    // hiddenのinput要素としてフォームに追加
    $("<input>",{
      type:"hidden",
      name:hidden_name,
      value:hidden_value
    }).appendTo("#the-form");
  }

  // 対象フィールドを追加し終わったら送信です
  $("#the-form").submit();
});

これはあらかじめフォームをHTMLで用意していますが、それも動的に作成することもできます。

一部を記述するとこうなります。

// 変数$formにフォームを作成
var $form = $('<form />', {method: 'post'});

// $formにhiddenのinput要素を追加
$form.append($('<input>',
  {
    type: 'hidden',
    name: hidden_name,
    value: hidden_value,
  });
// document.bodyにフォームを追加
$fm.appendTo(document.body);
// 送信
$fm.submit();
// で、最後にフォームを削除。
$fm.remove();

あまりJavaScriptでいろいろやりすぎるとわかりにくくなりそうですが、簡潔に記述して便利に使いたいです。

読んでくださってありがとうございました。

それではまた！