【jQuery】無の状態から特定のページに値をポストする方法。

例えばフォームタグの設置場所に困ったとき。DOMの文法的に配置するのを躊躇してしまうとき。めんどくさいとき←。

そんなときに超絶便利で素敵なポスト方法。

例えば以下のようなボタンをトリガーにしてポストを行う場合。

<button id="button">submit now</button>

jQuery側では以下のようにしてやる。

$(function(){
	$('#button').click(function(){
		// POSTしたいページを指定
		var post = './';
		var form = $('<form>', {'action':post, 'method':'POST'});
		var input1 = $('<input>', {'type':'hidden', 'name':'n1', 'value':'v1'});
		var input2 = $('<input>', {'type':'hidden', 'name':'n2', 'value':'v2'});
		var input3 = $('<input>', {'type':'hidden', 'name':'n3', 'value':'v3'});
		$('body').append($(form).append(input1).append(input2).append(input3));
		$(form).submit();
	})
})

これは何をしているのか。至って簡単。
その場でフォームを生成→bodyにアペンド→サブミット→完了。
inputタグ内のvalueは適宜jQueryで集めてきてやればよい。そして集めた分だけformタグ内にぶち込んでターゲットページにぶん投げればよいのである。

 

jQuery最強伝説。