Spring Bootでbuttonタグによるサブミット処理をいろいろなブラウザで実行してみた

Spring BootのWeb画面上で、ボタン押下時のサブミットを行う際、JavaScriptによるサブミット定義を別に追加することもできるが、IEで実行した際に、他のブラウザ(Edge, Chrome, Firefox)で実行した時と違う動きになる場合があるので、注意が必要である。

今回は、buttonタグによるサブミット処理を、onclickボタン押下時にサブミットした場合／しなかった場合と、JavaScriptによるサブミット定義を定義した場合／しなかった場合それぞれについて、IE・Edge・Chrome・Firefoxでの動作を確認してみたので、共有する。

なお、IEの場合に2回サブミット処理が走ることについては、以下のサイトも合わせて参照のこと。
http://blog.netandfield.com/shar/2011/11/internet-explorer.html

前提条件

下記記事の実装が完了していること。

IntelliJ IDEA上でGradleを使ってWeb画面のSpring Bootプロジェクトを作成してみたSpring Bootのプロジェクトを新規作成を「IntelliJ IDEA」のメニューから実施しようとしたところ、無料の「Commun...

また、IEは11.789.19041.0、Edgeは94.0.992.38、Chromeは 94.0.4606.71、Firefoxは93.0のバージョンを、それぞれ利用するものとする。

サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。

なお、上記の赤枠は、前提条件のプログラムから追加・変更したプログラムである。

HTMLファイルの内容は以下の通りで、「demo.js」を読み込む前に、jQueryのライブラリ「jquery-3.4.1.min.js」を読み込むようにして、動作検証用のボタン１～４を配置している。

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- jQueryの読み込み -->
    <!-- demo.js内でjQueryを利用するため、jQueryをdemo.jsより先に読み込む -->
    <script type="text/javascript" th:src="@{/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/demo.js}"></script>
    <title>index page</title>
</head>
<body>
    buttonタグの動作をブラウザ別に確認するための画面です。
    <br/><br/>
    <form id="form1" method="post" th:action="@{/method1}">
        <button id="btn1" type="button" onclick="testClick(this);">
            ボタン１(onclick有り、JS定義無し)
        </button>
    </form>
    <br/>
    <form id="form2" method="post" th:action="@{/method1}">
        <button id="btn2" type="button">
            ボタン２(onclick無し、JS定義無し)
        </button>
    </form>
    <br/>
    <form id="form3" method="post" th:action="@{/method1}">
        <button id="btn3" type="button" onclick="testClick(this);">
            ボタン３(onclick有り、JS定義有り)
        </button>
    </form>
    <br/>
    <form id="form4" method="post" th:action="@{/method1}">
        <button id="btn4" type="button">
            ボタン４(onclick無し、JS定義有り)
        </button>
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>index page</title>

</head>

<body>

buttonタグの動作をブラウザ別に確認するための画面です。

ボタン１(onclick有り、JS定義無し)

</button>

</form>

<br/>

ボタン２(onclick無し、JS定義無し)

</button>

</form>

<br/>

ボタン３(onclick有り、JS定義有り)

</button>

</form>

<br/>

ボタン４(onclick無し、JS定義有り)

</button>

</form>

</body>

</html>

JSファイル(demo.js)の内容は以下の通りで、ボタン３～４が押下された場合のサブミット処理の定義と、ボタンが押下されたタイミングでサブミットするtestClick関数を用意している。

'use strict';

$(document).ready(function(){
    // ボタン３～４が押下された場合のサブミット処理を定義
    $('#btn3').on('click', function(){
        $('#form3').attr('action', '/method2');
        $('#form3').submit();
    });
    $('#btn4').on('click', function(){
        $('#form4').attr('action', '/method2');
        $('#form4').submit();
    });
});

// ボタンが押下されたタイミングでサブミットする
function testClick(btn){
    btn.form.submit();
}

'use strict';

$(document).ready(function(){

// ボタン３～４が押下された場合のサブミット処理を定義

$('#btn3').on('click', function(){

$('#form3').attr('action', '/method2');

$('#form3').submit();

});

$('#btn4').on('click', function(){

$('#form4').attr('action', '/method2');

$('#form4').submit();

});

// ボタンが押下されたタイミングでサブミットする

function testClick(btn){

btn.form.submit();

}

サラリーマン型フリーランスSEという働き方でお金の不安を解消しよう先日、「サラリーマン型フリーランスSE」という働き方を紹介するYouTube動画を視聴しましたので、その内容をご紹介します。「サ...

コントローラクラスの内容は以下の通りで、初期表示処理と、メソッドmethod1, method2を定義している。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {

    /* Spring Bootでログ出力するためのLogbackのクラスを生成 */
    private static final Logger LOGGER 
        = LoggerFactory.getLogger(DemoController.class);

    /**
     * 初期表示画面に遷移する.
     * @return 初期表示画面
     */
    @RequestMapping("/")
    public String index(){
        return "index";
    }

    /**
     * method1メソッドを呼び出す.
     * @return 初期表示画面
     */
    @PostMapping("/method1")
    public String method1(){
        LOGGER.info("method1メソッドが呼ばれました。");
        return "index";
    }

    /**
     * method2メソッドを呼び出す.
     * @return 初期表示画面
     */
    @PostMapping("/method2")
    public String method2(){
        LOGGER.info("method2メソッドが呼ばれました。");
        return "index";
    }
}