【HTML5】1つのフォームに複数のSubmitボタンをつけるには(formaction, formmethod)

Webサービスを開発していると、たまに一覧画面に一括処理を追加したいという要望が出てきたりします。

例えば、以下のような画面のように「一括で書籍の予約を開始する」といった状態の変更、「一括削除」のようなことを頻繁に行う必要がある場合です。

従来、実装の関係上で

• HTMLのフォームを一つ用意
• 複数のボタンをフォームに追加
• それぞれのボタンにクリック時のJavascriptコールバックを付ける
• Javascriptのコールバックの中で、サーバ側にPOST, GETする

というようなことをしていました。

最近では、HTML5で <input type="submit"> に追加された formaction, formmethod プロパティを使うと綺麗に実装できます。各ブラウザの対応状況も良い感じです。

Mozillaのドキュメントを読むと従来のformのaction, methodがあった場合、それらを上書きしてくれるようです。

実装

以下のような感じになります。

<form>
  <input type="submit" value="予約を有効にする" formaction="/admin/book_reserve_acceptance" formmethod="POST"/>
  <input type="submit" value="削除" formaction="/admin/book_bulk_deletion" formmethod="POST"/>

  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th></th>
        <th>書籍名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type='checkbox' value="1"/></td>
        <td>新刊1書籍名</td>
      </tr>
      <tr>
        <td><input type='checkbox' value="2"/></td>
        <td>新刊2書籍名</td>
      </tr>
    </tbody>
  </table>
</form>

2つのボタン両方ともmethodがPOSTなので、

<form method="POST">
  <input type="submit" value="予約を有効にする" formaction="/admin/book_reserve_acceptance" />
  <input type="submit" value="削除" formaction="/admin/book_bulk_deletion" />

  <!-- テーブルの箇所 -->
</form>

のようにも書けます。