投稿日： 2020年3月26日
最終更新日： 2023年3月28日

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

YouTubeも見てね♪

【最新機種】GoPro hero11 Black

【日本国内正規品】 GoPro hero11 Black

created by Rinker

GoPro(ゴープロ)

¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

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

created by Rinker

ペヤング

¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

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

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

created by Rinker

Red Bull(レッドブル)

¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう！

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

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,748 (2024/04/03 21:33:15時点 Amazon調べ-詳細)

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

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

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

created by Rinker

MOFT

¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

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

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥1,856 (2024/04/03 21:33:16時点 Amazon調べ-詳細)

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

1 フォームのポストをボタンによって動的に切り替えたい
- 1.1 JavaScriptで上書きするのが一般的だった
- 1.2 HTML5の登場により1行追加するだけで実現可能
2 やり方
- 2.1 サンプルコード
  - 2.1.1 確認
  - 2.1.2 formタグにactionが無くても問題ない
3 終わりに

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

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

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

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

...
(略)
...
<form method="post">
...
(略)
...
  <button type="button" onclick="formSubmit('./draft.html')">下書き</button>
  <button type="button" onclick="formSubmit('./create.html')">作成</button>
</form>
...
(略)
...
function formSubmit(url) {
  $('form').attr('action', url);
  $('form').submit();
}
...
(略)
...

...

(略)

...

...

(略)

...

</form>

...

(略)

...

function formSubmit(url) {

$('form').attr('action', url);

$('form').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

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

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

やり方

サンプルコード

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登録フォーム</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>フォーム</h1>
    <form method="POST" action="./create.html">
        <p>
            <input type="submit" value="下書き" formaction="./draft.html" />
            <input type="submit" value="作成" />
        </p>
    </form>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>登録フォーム</title>

</head>

<body>

<p>

</p>

</form>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>作成完了</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>作成完了</h1>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下書き完了</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>下書き完了</h1>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>下書き完了</title>

</head>

<body>

<h1>下書き完了</h1>

</body>

</html>

確認

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

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

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

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

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登録フォーム</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
    <h1>フォーム</h1>
    <form method="POST">
        <p>
            <input type="submit" value="下書き" formaction="./draft.html" />
            <input type="submit" value="作成" formaction="./create.html" />
        </p>
    </form>
</body>

</html>