WEB開発備忘録

フォームの入力値をjqueryで一括取得する

フォームの入力値をsubmitではなくjqueryで一括取得する方法のメモです。
流れとしては、フォームの各パーツを「each」で取得していき、オブジェクトにマッピングしていきます。

手順1:HTMLフォームの書き方
formタグにid値を設定します。

<form id="フォームID">
~ フォーム部品 ~
</form>

手順2:ボタンのonclickイベントを設定
jqueryのコードを呼び出すきっかけを作ります。

<form id="フォームID">
~ フォーム部品 ~
<input type="button" value="送信" onclick="javascript:getFormVals();">
</form>

手順3:Jqueryでの入力値取得
入力値を取得する関数を作ります。

function getFormVals () {
  // オブジェクトを用意
 obj= new Object();
 // テキストフィールドの値を取得/マッピング
  $("#フォームID input:text").each(function(){
    obj[this.name] = this.value
  });
  // テキストエリアの入力値を取得/マッピング
  $("#フォームID textarea").each(function(){
    obj[this.name] = this.value
  });
  // hiddenの値を取得/マッピング
  $("#フォームID input:hidden").each(function(){
    obj[this.name] = this.value
  });
  // radioやcheckboxのチェック値を取得/マッピング
  $("#フォームID input:checked").each(function(){
    // check box
    if($(this).prop('type')=='checkbox'){
      if(obj[this.name]===undefined)obj[this.name] = [];
      obj[this.name].push($(this).val());
    // radio
    }else{
      obj[this.name] = this.value;
    }
  });
  // selectの選択値を取得/マッピング
  $('#フォームID option:selected').each(function(){
    var input_name = $(this).parent().prop('name');
    obj[input_name] = this.value
  });
  // objに各入力値がマッピングされました。 
}

これでobjにフォームへの入力値がマッピングされました。
あとはjavascriptでフォーム入力値を扱った処理を記述していきます。