アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

入力画面:画像をSUBMITボタン代わりに使う STS+Spring Boot +thymeleaf 

先にお断りしておきます。今回はほぼ jQueryの話です。

 

先にお断りしておきます。

 

さて、本題です。

 

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

 

<input type="submit"・・でだけで書けるので、SUBMITボタンはとても手軽なんですけど、まあ、たまには別のものでSUBMITしたいことがあります。

 

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

 

幸い、今はjQueryを使うとかんたんにできるので、今回は画像をつかってSUBMITをやってみます。

 

SUBMITする画像のHTMLです。class名に「pic」名前をつけました。

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

 

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>

 

 

あとは、画像を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

 

Formの外に配置した画像からでもSUBMITできます

もうひとついいことがあります。

 

SUBMITボタンは必ずFormタグで囲まれた中に配置しないといけません。

 

ですが、このやり方だと、Formの外に配置した画像からでもSUBMITできます。

 

レイアウトの自由度があがるので、結構使い勝手がいいです。

 

前回の記事で作成した@DateValueを付与したテキストボックスにエラーになる日付をいれて、画像をクリックして実行します。

 

f:id:arakan_no_boku:20170327221756j:plain

 

おー、いけた。

 

 


 STS +Spring Boot+thymeleaf 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。

 

 

f:id:arakan_no_boku:20170404203859j:plain