2010年09月05日


JavaScript : 文字列にWEBという世界を旅させる為の心得

旅をするのに、飛行機に乗るなら飛行場。電車に乗るなら駅へ行く必要があります。
また、その場所へ行っても「旅をする為」のチェックがあります。切符を持っている
かどうかとか、持ち込んではいけないものを持っていないとかさまざまです。

それらは、いずれも旅をするのに支障の無いようにする為のルールで
あったりするわけです。極端な話、ルールを守らなくでも「移動」だ
けなら可能ではあるわけですが。

文字列の旅は FORM から出発

<FORM> 〜 </FORM> 中に入る事によってサーバーへの旅の権利を得る事ができます。
また、出発する前にチェックを受けて、全てのチェックに通過してはじめて、
ブラウザがサーバーへ送り出してくれます。

その為に、発射スイッチが必要です

 1) type="submit" のボタン

このボタンを押すと、FORM の onsubmit イベントが起こります

Form_submit_button

 2) onsubmit='return checkForm(this)'

return は、checkForm でチェックされた結果を受け取る為に必要です。ブラウザ
は、こうしておくと checkForm から return された内容を見る事ができます

checkForm は、自由に作成できる「チェック機構」を持つ部屋です。
旅する文字列を全てチェックできるように、FORM 自身を示す、this を引き渡しています。

 3) 問題があれば return false;

return は、それを実行してしまうと、この「チェック機構」を持つ部屋をすぐ
出てしまいます。後に続くチェックの係の窓口に並ぶ事はありません。

Form_submit_check

ただ、作法として、どこがまずかったかブラウザに知らせる為に、focusselectという行動を取ることが「最良のマナー」となっています。
( しなくても良いです )

 4) 問題が無ければ return true;

全ての窓口で「承認」をもらって晴れて旅が始まる直前の状態です。ここから
はもう止める事ができまません。手順に従って旅が始まります。
<script type="text/javascript">
function checkForm( obj ) {
	if ( obj.inp.value != "123" ) {
		alert("一致しません");
		obj.inp.focus();
		obj.inp.select();
		return false;
	}
	if ( !obj.chk.checked ) {
		alert("チェックして下さい");
		obj.chk.focus();
		return false;
	}
	if ( !obj.rb[0].checked ) {
		if ( !obj.rb[1].checked ) {
			alert("どちらかを選んで下さい");
			obj.rb[0].focus();
			return false;
		}
	}

	alert("送信します");
	return true;
}
</script>
<form name="frm" onsubmit='return checkForm(this)'>
<input type="text" name="inp">
<input type="checkbox" name="chk">
<input type="radio" name="rb">
<input type="radio" name="rb">
<br />
<input type="submit" value="送信">
</form>


posted by at 10:00 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする


この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。