jqueryでフォームの内容をまとめて取得設定

  • fromデータを一括設定する
var cfg={
  'textname'     : 'test data',
  'selectOpt'    : '7',
  'checkType'    : [1,3],
  'radioEnable'  : 1
};
for(var name in cfg){
  var input = $(('form[name="form"] [name="'+name+'"]');
  var type  = input.prop('type');
  console.log(name+':'+type);
  switch(type){
    case 'radio':
      input.val([cfg[name]]);
      break;
    //case 'checkbox':
    //case 'select-one':
    default:
      input.val(cfg[name]);
  }
}

肝はselectタグの取得の仕方、inputタグと同じようにtypeをpropで取得すると、単一のselectboxの場合
select-oneと返って来る。実際にはそんな値は設定されていないが、これにより、SELECTタグの場合の分岐を考えなくてよくなる。単純にnameプロパティが設定されているタグを取ってくればいい。あとはradioボックスだけvalで[]を付けて配列にしてあげるだけで、他は、単純にval()で設定するだけ。

  • formデータの変更イベントを一括で処理する
 $('form[name="form" input,select').on('change',function(){
  var name = $(this).prop('name');
  var type = $(this).prop('type');
  switch(type){
    case 'radio':
      cfg[name] = $('[name="' + name + '"]:checked').val();
      break;
    case 'checkbox':
      cfg[name] = $('[name="' + name + '"]:checked').map(function(){
        return $(this).val();
      }).get();
      break;
   // case 'select-one':
   // case 'text'
   default:
     cfg[name] = $('[name="' + name + '"]').val();

onを使ってまとめて処理