素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日: 2020年3月26日
最終更新日:

【JavaScript要らず】HTML5で追加されたbuttonタグのformaction属性でSubmit先のURLを簡単に変更する方法【たった1行】

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥29,280 (2024/03/15 19:06:01時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

336×280




フォームのポストをボタンによって動的に切り替えたい

JavaScriptで上書きするのが一般的だった

HTMLでフォームを作成している場合、要件によっては通常のサブミットとは別のURLにフォーム内容を送信したい場合があると思います。

そんなとき、今までは以下のようにjQueryなどのJavaScriptを使ってボタンが押下された際にformのURLを動的に書き換えた上でsubmitする、といった方法が一般的でした。

HTML5の登場により1行追加するだけで実現可能

しかしそんな話も過去の話

なんと、HTML5にて追加されたbutton要素のformaction属性を利用することでJavaScriptを一行も書く必要なく同様の処理が可能になったのです!

Definition and Usage
The formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form’s action attribute.

The formaction attribute is only used for buttons with type=”submit”.HTML button formaction Attribute

サポートしているブラウザ等は公式サイトを見ていただければなと思います。

では、実際に試してみましょう!

やり方

サンプルコード

今回は以下のようなフォームを用意し、下書きボタンを押下した際にのみ、formaction属性を上書きするようにしてみようと思います。

確認

では、実際に動かしてみましょう。

期待通りの動きがJavaScript無しで実現出来ましたね!

これは簡単かつ便利過ぎる・・・!

formタグにactionが無くても問題ない

また、以下のようにformタグにaction属性をつけなくても問題ありません。

その場合は必ずbuttonタグにsubmitaction属性を記述するようにしてください。

お好みのやり方で試してみてください♪

終わりに

以上のように、HTML5の新しい属性のおかげでとても簡単に実装出来ました!

他にもHTML5の新機能で便利なものがあるので、気になる方は調べてみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪

お名前.comサイドバー