
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
jQuery
2018.09.19
jQuery の submit メソッドは、送信ボタンをクリックした際に form 要素内のデータを取得できるメソッドです。
submit メソッドを使用すると、本処理に先立って 入力チェック等の前処理を行うことが可能となります。
今回は、jQuery の submit メソッドの使用方法について紹介します。
1.submit メソッド
2.submit メソッドで form データを取得
3.submit メソッドのキャンセル
submit メソッドは、フォーム内容の送信処理を行う際に使用するメソッドです。
form 要素内でのみ使用可能で、フォーム内容を 以下のいずれかの動作によって送信します。
●<input type=”submit”>をクリック
●<input type=”image”>をクリック
●<button type=”submit”>をクリック
●form 要素にフォーカスを当てて Enter キーを押下
submit メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).submit( );
$(セレクタ).submit( handler( eventObject ) );
$(セレクタ).submit( [ eventData ], handler( eventObject ) );
引数なしの「 .submit( ) 」は、「 .trigger(“submit”) 」の省略形です。
(trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。)
submit メソッドの引数の内容は、それぞれ以下の通りです。
.submit( handler( eventObject ) )
handler 実行する処理を関数として指定
.submit( [ eventData ], handler( eventObject ) )
[eventData] 添付したいデータをマップ値で指定 handler 実行する処理を関数として指定
submit メソッドを使用して、入力内容を表示します。
表示したいテキストを入力して 送信ボタンをクリックしてみて下さい。
(アラートが表示されますので OK ボタンをクリックして下さい。)
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("form").submit(function() { $("#out1").text("入力内容は「 " + $("#dat1").val() + " 」です!"); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> 任意のテキストを入力して 送信ボタンをクリックして下さい。 <form action="javascript:alert('送信します');"> <div style="display:inline-flex; align-items:center;"> <input type="text" id="dat1"> <input type="submit"> </div> </form> <div id="out1"></div> </div>
上のサンプルでは、form 要素内の action 属性にアラートを表示するプログラムを記述して、フォーム内容が送信される際にアラートでメッセージを表示しています。
このように、submit メソッドを使用すると、送信ボタンをクリックした際に発生する処理の直前に別の処理を行うことができます。
入力内容のエラーチェックを行ったり 確認メッセージを表示したりするなど、この直前処理を有効に使用すると、ユーザーがより効率良く作業できる画面を作成することができます。
尚、val メソッドの使用方法についてはjQuery【 val 】value 値の取得と設定をご参照下さい。
また、form 要素については、以下のページもご参照下さい。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える
submit メソッドによる処理を中止する場合には、返り値に false を指定して、次のように記述します。
$("form").submit(function() { return false; });
通常、次のように条件式と組み合わせて使用します。
$("form").submit(function() { if($("#in_dat").val().length < 1) return false; $("#out_dat").text($("#in_dat").val().length + " 文字入力されました!"); });
「 return false 」以下は処理されないため、このサンプルは 未入力の場合に文字数を表示しないように制御しています。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.