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を使ってまとめて処理