読者です 読者をやめる 読者になる 読者になる

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

あれこれ興味をもって考えたことを書いてます

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

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

 

タイトルに「STS  3.8.3(Spring Boot 1.5.1)+thymeleaf」とつけていますが、ちょこっとしかでてきません。先にお断りしておきます。

 

さて、本題です。

 

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

 

しかも、SUBMITボタンは必ずFormタグで囲まれた中に配置しないといけないのですが、このやり方だと、Formの外に配置した画像からでもSUBMITできたりして、結構使い勝手がいいです。

 

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

 

f:id:arakan_no_boku:20170327221756j:plain

 

おー、いけた。

 

 


 STS  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

 

f:id:arakan_no_boku:20170404203859j:plain