同じform内で複数の送信ボタンを設置して、それぞれ送信先を別にしたいということがあったので、設定方法をメモしておきます。
サンプルコード
送信ボタンにdata属性で送信先を指定する方法で実装してみます。
1 2 3 4 5 | <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を書き換えるようにします。
1 2 3 4 5 6 7 8 9 | $(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(); });}); |
これで送信先を変更することができました。
ボタン毎に送信先を設定するデモページ
コメントが承認されるまで時間がかかります。