formでボタン毎に送信先を設定する

同じform内で複数の送信ボタンを設置して、それぞれ送信先を別にしたいということがあったので、設定方法をメモしておきます。

サンプルコード

送信ボタンにdata属性で送信先を指定する方法で実装してみます。

<form action="./publish.html" method="get">
	<input type="text" name="title">
	<button data-action="./draft.html">下書き</button>
	<button data-action="./publish.html">公開</button>
</form>

jQueryを使って、data-actionをクリックした時にformのactionを書き換えるようにします。

$(function() {
	$('[data-action]').on('click', function(e) {
		e.preventDefault();
		var $form = $(this).parents('form');
		var actionUrl = $(this).data('action');
		$form.attr('action', actionUrl);
		$form.submit();
	});
});

これで送信先を変更することができました。
ボタン毎に送信先を設定するデモページ