formに値を渡すjquery拡張

formに値入れるのにいちいち
$(':input[name=name1]').val('value1');
$(':input[name=name2]').val('value1');
　：
…って書くのがめんどくさいのでまとめて渡す拡張

作り方

jquery.fillInForm.jsとか適当に名前をつけて保存します。

/* (C) makoto@2ch.to */
(function($){
	$.fn.extend({
		fillInForm : function($_){
			var $self = this;
			if( typeof $_ === 'string' ){
				if( typeof $.parse === 'undefined' ) throw 'please install jQuery parse plugin';
				$_ = $.parse($_);
			}
			$.each($_,function($k,$v){
				$(':input[name='+$k+']',$self).val($v);
			});
		}
	});
})(jQuery)

準備

〜の中でjQueryと先ほど作ったjquery.fillInForm.jsをロードします。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./jquery.fillInForm.js"></script>
<!-- ↓なくても動きますがロードしてあるとテキストも渡せるようになります -->
<script type="text/javascript" src="./jquery.parse.js"></script>

使い方

オブジェクトを渡すだけです。idではなくnameですのでご注意ください。

//基本的な使い方
$('form').fillInForm({
  name1 :'value1',
  name2 : value2'
});

jquery.parse.jsと連動します。

//jquery.parse.jsがロードしてあればqueryっぽい文字列が渡せます
$('form').fillInForm('name1=value1&name2=value2');

//もちろんparseメソッドの返り値をそのまま渡してもOK
var $query = $.parse();
$('form').fillInForm($query);