デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.submit( )データ送信時の処理を設定

構文

データ送信時の処理を設定返値:jQueryオブジェクト
jQo.submit( function )ver1.0〜
jQo.submit( )ver1.0〜
jQo.submit( object, function )ver1.4.3〜

機能

フォームにおいてデータ送信時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定(バインド)されたfunctionを実行します。

submitメソッドは子孫要素からのイベントを受け取るので、セレクタをsubmitボタンにする必要はありません。セレクタをform要素にしておけばフォーム内のsubmitボタンすべてに対応できます。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

解説

データ送信時に実行する処理を設定

サンプル(submit/01.html)を開いてbody内に送信(submit)ボタンを含んだform要素とp要素があることを確認してください。

<form>
	<input type="submit" value="submit" />
</form>
<p></p>

jQueryは以下の様に記述されsubmitメソッドの引数にfunctionの「submitFunc」が設定されています。submitメソッドは子孫要素からのイベントを受け取る(バブリングによりイベントは先祖要素に伝わる)のでセレクタは送信ボタンである必要はありません。
→参考:使い方「イベントフロー(1)」

$(function () {
	$("form").submit(submitFunc);
});

submitメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてデータ送信時に実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

submitに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 データ送信時に実行したい処理
}

サンプルsubmit/01.htmlで利用したsubmitFuncは以下の様になっており、appendメソッドを利用してp要素に「submit」と文字を追加します。またサンプルなので、実際に送信を行わないように「return false」を設定しています。→参考:使い方「イベントフロー(2)」のメモを確認してください。

function submitFunc(eo) {
	$("p").append("submit ");
	return false;
};

結果として、submitボタンをクリックするたびに「select」と文字が追加されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(submit/01b.html

$("form").submit(function (eo) {
	$("p").append("submit ");
	return false;
});

他の要素に設定された送信時の処理を実行する

submitメソッドは引数を設定しないと、要素に設定された送信時の処理を実行します。
サンプル(submit/02.html)を開いてbody内にdiv要素が追加されたことを確認してください。

続いてjQueryを確認してください。送信時の処理はsubmit/01b.htmlと同じですが、以下の処理が追加されています。この処理によってdiv要素をクリックするとform要素に設定された送信時の処理が実行されます。

$("div").click(function (){
	$("form").submit();
});

結果として、div要素を「クリック」するとsubmitボタンをクリックしたのと同じようにp要素に「submit」と文字が追加されます。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(submit/03.html)を開いてbody内の構成はsubmit/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、submitメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。この値をappendメソッドを利用してp要素に追加します。

$("form").submit({test:10}, function (eo) {
	$("p").append(eo.data.test + " ");
	return false;
});

結果として、submitボタンをクリックするとp要素に第1引数で渡されたtestプロパティの値「10」が追加されます。

メモ

すこし実践的なサンプル

submitメソッドはフォームのチェックにおいて有用です。サンプル(submit/test01.html)を開いてbody内の構成を確認してください。submitボタンの他にtextタイプのinput要素(nameのid属性)とspan要素があります。

jQueryは以下の様に記述され、submitボタンがクリックされるとvalメソッドを利用してinput要素(nameのid属性)の入力情報を取得します。これをif文でチェックし、もし何も入力されていなかったらspan要素にtextメソッドを利用して「名前を入力してください」と表示します。さらに入力しやすいようにfocusメソッドでinput要素(nameのid属性)にフォーカスを当てます。

最後にポイントとして「return false」を設定し、送信を行わないようにします。これがないと名前がないままでもデータを送信してしまいます。「return false」については使い方「イベントフロー(2)」のメモを確認してください。

$("form").submit(function (eo) {
	var myName = $("#name").val();
	if(myName == ""){
		$("span").text("名前を入力してください");
		$("#name").focus();
		return false;
	}
});