Form内でリクエスト先を振り分ける

2021年3月22日月曜日

html

t f B! P L

 

概要

form内の各ボタンそれぞれで別々のリクエスト先に振り分けたい。form内に配置したボタンは、クリックすると自動的にsubmitしてロードされてしまう。

<form action="/hoge">
<button>別リクエストに投げたいボタン </button><!-- /hogeにsubmitされる -->
<input type="submit" value="本命のsubmitボタン" >
</form>

formaction属性を使う

やり方は色々あるが、html5のformaction属性を使うのが一番スッキリすると思う。
    <button formaction = "(リクエスト先URLを書く)" formmethod = "(リクエストメソッドを指定する)">
    </button>

パラメーターを付与してリクエスト先で振り分けるとか、javascriptでボタンを補足して振り分けるとか他にもやりようがある。

でも、パラメータ付与はリクエスト先で条件分岐が増えて管理が面倒だし、javascriptで振り分けると一見してリクエストがどこに行くのかがわかりづらい。

formaction属性ならボタン自体がどのリクエスト先に向かうのかを知っているので管理しやすい。

注意点

formaction属性にはリクエストパラメータを付与できない。というかformのactionにもパラメータ指定できないので当然かも。以下のクエリパラメータはサーバサイドに送信されない。
<form action="/hoge?is_hoge=true">
<button formaction="/other_request?is_other=true">別リクエストに投げたいボタン </button>
</form>
何かパラメータを送信したいならhiddenを使う。
<form action="/hoge">
<input type="hidden" name="is_hoge" value="true">
<input type="hidden" name="is_other" value="true">
<button formaction="/other_request">別リクエストに投げたいボタン </button>
</form>

自己紹介

Webエンジニアをやっています。日々思ったことや、読書レビュー、IT系の記事などを書き連ねています

広告

[書籍] 世界一楽しい決算書の読み方感想まとめ

  こういう人におすすめ 決算書を読もうとして挫折した人 企業分析したい投資家 会社で経営企画担当、管理職などのポジションの人 概要 著者はTwitterで会計クイズを行なっている 「大手町のランダムウォーカー」さん 。 「日本人全員が財務諸表を読める世界を創る」 を合言葉にして...

QooQ