jQuery を使って 単一フォーム内に複数ボタンを配置して押されたボタンに応じて遷移先を変えるようにするサンプルコードを作成しました。
サンプルコード
HTML と JavaScript は分けて記載します。
confirm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>確認</title>
</head>
<body>
<h1>確認</h1>
<form id="form" method="POST" action="">
<div>
<span>会社名：</span>
<input type="text" id="name" name="name" value="<%= name%>" readonly />
</div>
<div>
<input type="submit" id="btn-back" value="戻る" />
<input type="button" id="btn-regist" value="登録" />
</div>
</form>
<script type="text/javascript" src="/public/third_party/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/public/scripts/shop/regist/confirm.js"></script>
</body>
</html>
confirm.js
(function () {
// 「戻る」ボタン押下時に呼び出されます。
var btnBack_onclick = function (event) {
$("#form").attr("action", "/shop/regist/input").submit();
};
// 「登録」ボタン押下時に呼び出されます。
var btnRegist_onclick = function (event) {
$("#form").attr("action", "/shop/regist/complete").submit();
};
// ドキュメント読み込み完了時に呼び出されます。
var document_onready = function (event) {
$("#btn-back").on("click", btnBack_onclick);
$("#btn-regist").on("click", btnRegist_onclick).focus();
};
$(document).ready(document_onready);
})();
解説
confirm.html
HTMLの form 内には複数の button を配置しています。
formについて、遷移先は押下するボタンに応じて書き換えるため form[@action] は空欄にしています。
それぞれのボタンについて、個別に識別する必要があるため、id 属性を指定しています。
ここで指定した id は次の confirm.js スクリプトで利用します。
なお、フォーム内にフォーカスがあるとき Enter キー押下した際のデフォルト動作を指定したい場合、
デフォルト動作にしたいボタンを サブミット ( input[@type="submit"] ) とし、その他はすべて通常ボタン ( input[@type="button"] ) とすることで実現できます。
confirm.js
それぞれのボタンに対して押下されたときのイベント（ click イベント ）を設定します。
ボタン押下されたとき、form の action 属性を変更してから submit を行います。
ちなみに今回は jQuery なので 一連の動作をメソッドチェーンで記述してみました。
いかがでしょうか、参考になったでしょうか？ 単一フォームに複数サブミットで遷移先を切り替える方法を書いた記事はいくつか見受けますが… デフォルト動作に関してはなかなか見かけないので参考になったかと思います。
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！