入力画面：画像をSUBMITボタン代わりに使う。ほぼjQuery／STS3＋Spring Boot ＋thymeleaf

画像をSubmitボタンとして使うパターンです。

ほぼ、jQueryではあるのですが。

なお、STS3(3.9.6)＋SpringBoot2.0＋tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

Submitボタン以外で「Submit」

WEBアプリケーションは、原則、「フォームに何かを入力したり、選択して実行（SUBMIT）ボタンを押す」の繰り返しです。

<input type="submit"・・でだけで書けるので、SUBMITボタンはとても手軽です。

でも、たまには別のものでSUBMITしたいことがあります。

例えば、リンクとか画像とか。

幸い、今はjQueryを使うとかんたんにできます。

今回は画像をつかってSUBMITをやってみます。

画像のHTML

SUBMITする画像のHTMLです。

class名に「pic」名前をつけました。

<img th:src="@{/images/boku.jpg}" src="../static/images/boku.jpg" class="pic" alt=""></img>

FormファイルのHTML

Submitの対象となるFormファイルのHTMLです。

jQueryのセレクタとしてidを使うので、「hello3Form」という名前をつけてます。

SUBMITボタンも残してますが、今回は使いません。

<form role="form" id="hello3Form" action="/outpg01" th:action="@{/outpg01}" th:object="${hello3Form}" method="post">

<p class="msg" th:text="#{please.chktest}">Please input PID</p>
<input type="text" id="chktest" name="chktest" th:field="*{chktest}" />
<span class="error_msg" th:if="${#fields.hasErrors('chktest')}" th:errors="*{chktest}">error!</span><br />

<button type="submit">実行</button>
</form>

JavaScript

画像をSUBMITボタンとして扱うための、スクリプトです。

これもHTMLファイルの<head>から</head>の間に書きます。

    <script> 
    <!--
    $(function(){
        $(".pic").click(function () {
            $('#hello3Form').submit();
        });
    });
    //-->
    </script>

こうしておくと、クラスセレクタで、class="pic"をつけると、どのタグからでもSUBMITすることができます。

やってることはシンプルで、クリックされたらFormを選択して（id名のセレクタで選択してます）Submit()をよんでいるだけです。

これで、下の人物イラスト画像が、SUBMITボタンになりました。

f:id:arakan_no_boku:20170328235615j:plain