2023年5月9日火曜日

チェックボックスがセットされていなくても POST パラメータに含める方法

Form の checkbox が not checked でも POST する

Formの内容をPOSTする際に、セットされていないcheckboxの値が渡されないと困ってしまうことが多いですよね?
ね?ね?w

以下 jQuery を使った(checked じゃないと POST できない)POSTの例

//フォーム入力情報取得
var form_data = new FormData($('#form-name').get(0));
//サーバに渡す。
$.post({
  type: 'POST', 
  url: url,
  data: form_data,
  }).done(function(response){
  }
  //以下略
});

これだとチェックボックスがチェックされている部分だけが渡されてしまいます。
 データベースの boolean 値を保存しようとしても、OFF の場合に値が渡されずに更新されなくなってしまいます。

そこで、こんな関数を作って対応しました。

/**
* フォームの入力情報を取得する。
* checkbox で OFF 状態の情報も含める
*/
GetFormData = function(form_tag)
{
    var tag_data = $(form_tag).get(0);
    var form_data = new FormData(tag_data);
    $(form_tag + ' input:checkbox').each(function(){
      var id = $(this).attr('id');
      var checked = $(this).prop('checked');
      if(!checked)
      {
        // OFF のチェックボックス状態も form_data に含める。
        form_data.append(id, checked);
      }
    });
    return form_data;
}

//フォーム入力情報取得
var form_data = GetFormData('#form-name');
//サーバに渡す。
$.post({
  type: 'POST', 
  url: url,
  data: form_data,
  }).done(function(response){
  }
  //以下略
});

まとめ

みごと、bool 値を更新することができるようになりました。
めでたしめでたし。

つか、なんで FormData は OFF の状態を取り込まない仕様にしてるんだろう・・・
困った仕様ですよね。