WEBアプリケーションとして、FORM の送信処理を標準の JavaScript だけで記述するのと、jQuery 主体で記述するのはかなり違うものになります。また、日付処理にしてもまだまだ標準の HTML ではサポートしきれませんし、日付の論理チェックを イザ JavaScript で記述するにしても結構面倒です。
補足） .ready() / DOMが完全にロードされたときの処理
.ready() の書き方として公式のドキュメントではまったく同じ機能だとして以下の3つを提示しています。
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )
真ん中の処理は、『推奨しない』とありますが、最後の処理はシンプルですが、.ready() と同じです
( 原文 : All three of the following syntaxes are equivalent )
関連する記事
FORM の送信と JavaScript
最近やっと、HTML5 の新しい属性を使って FORM の処理をサポート可能になってきました( スマホのブラウザは未確認ですが )。ですから、FORM + jQuery + jQyery UI + datepicker + JavaScript + HTML5 というようなテンプレートを作成しました。
FORM の submit イベント
jQuery でこの処理を書くとすると、$( "form" ).submit(function( event ) { 処理 }); という記述になります。ここでは、セレクタとして ID を指定していますが、一般的な一つのフォームを持つページであれば、セレクタは form で十分です。
この時、条件によってサーバへの送信をキャンセルする処理が、event.preventDefault(); となります。( 一般の JavaScript ですと、onsubmit イベント内で、false を戻す処理にあたります )
// ***********************************************
// 更新ボタンがクリックされた時のみ確認
// ***********************************************
$( "#target_form" ).submit(function( event ) {
// 日付妥当性チェック
if ( !($( "#syainBirth" ).val().isDate()) ) {
alert("日付が正しくありません");
$( "#syainBirth" )
.select()
.focus();
event.preventDefault();
return;
}
if ( $(this).data("button_target") == "更新" ) {
if ( !confirm("更新してよろしいですか?") ) {
event.preventDefault();
return;
}
}
});
さらに、このテンプレートでは submit ボタンが複数あるので、『処理』の中でどちらのボタンが押されたかを知る為に、submit ボタンの onclick イベントで FORM にボタンの文字列をユーザデータとしてセットして利用しています。
// ***********************************************
// submit ボタンのクリックイベント
// ***********************************************
$("input[type='submit']").click( function( event ){
$( "#target_form" )
// 押されたボタンの文字列を FORM の内部データとして保存
.data("button_target", event.currentTarget.value);
});
submit ボタンに対するセレクタは input[type='submit'] という属性の値による一致で作成しています。その他の FORM の中にある input 要素等も、サーバに送る為には name属性を必ず指定します。ですから、それぞれの入力要素を参照するには、同様に input[name='名前'] で参照すればいいでしょう。
補足） input 要素で form の送信属性を上書き
input 要素 - HTML | MDN
1) formaction ( ※ 送り先アプリケーションを変更できます )
2) formenctype ( ※ ファイルアップロードボタンを追加できます )
3) formmethod ( ※ GET と POST を切りかえる事ができます )
4) formtarget ( ※ 送り先ウインドウを変更できます / 例) 送り先を IFRAME に切り替える )
jQuery UI + datepicker で日付入力支援
jQuery UI の datepicker を使うと、日付入力が容易になりますが、オプションの設定がそれなりに面倒なので、このテンプレートを基本に変更するといいと思います。また、手入力も可能なので、HTML5 の pattern 属性で日付フォーマットの入力を強制しています。
<input class="pass2"
type="text"
name="syainBirth"
id="syainBirth"
value=""
pattern="^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$"
maxlength="10"
style="">
さらに、正しい日付である必要を考慮する場合の為に、String オブジェクトに isDate メソッドを追加しています。
HTML5 の属性の利用
数字の入力が必要な場合は、type 属性を number にすると簡単ですが、ブラウザによっては 数字を変更するコントロールがフィールドに追加されるので、『給与』フィールドは pattern 属性でチェックしています。
但しスマホなどでは、タップすると入力システムが開きますが、number 指定しておくと最初からテンキーが開くようなので、利用価値が大きいです。
※ 実際問題として、type="tel" が正解のようです(number だと数字を連続入力すると他の文字に変換されてしまいます)。
社員コードは必須入力なので、ページがロードされた時に jQuery から required を設定しています。これは、pattern のように HTML で記述してもいいですが、必須に関してはアプリ作成の初期段階のテスト時にはチェックして欲しく無い場合も多いので、動的にセットしています。
その他
キャンセルボタンは、入力チェックの発生しない通常ボタンを使用しています。
このサンプルでは、誰でもすぐ試せるように、Google がホスティングしている jQuery を使用しています。
▼ 実際の実行
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// jQuery UI datepicker 用デフォルトオプション
// ***********************************************
var datepicker_option = {
dateFormat: 'yy/mm/dd',
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
monthNames: ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
showMonthAfterYear: true,
yearSuffix: '年',
changeYear: true,
showAnim: 'fadeIn',
yearRange: "1950:2014"
}
$(function() {
// ***********************************************
// submit ボタンのクリックイベント
// ***********************************************
$("input[type='submit']").click( function( event ){
$( "#target_form" )
// 押されたボタンの文字列を FORM の内部データとして保存
.data("button_target", event.currentTarget.value);
});
// ***********************************************
// 更新ボタンがクリックされた時のみ確認
// ***********************************************
$( "#target_form" ).submit(function( event ) {
// 日付妥当性チェック
if ( !($( "#syainBirth" ).val().isDate()) ) {
alert("日付が正しくありません");
$( "#syainBirth" )
.select()
.focus();
event.preventDefault();
return;
}
if ( $(this).data("button_target") == "更新" ) {
if ( !confirm("更新してよろしいですか?") ) {
event.preventDefault();
return;
}
}
});
// ***********************************************
// datepicker プラグイン
// ***********************************************
$("#syainBirth").datepicker(datepicker_option);
// ***********************************************
// 必須と初期フォーカス
// ***********************************************
$("#syainCode")
// HTML5 属性
.prop("required", true)
.focus();
});
// ***********************************************
// 日付妥当性チェックを String オブジェクトに追加
// ***********************************************
String.prototype["isDate"] = function() {
var str = this.valueOf();
if ( str == "" ) {
return true;
}
if ( !str.match(/^\d{4}\/[\d]+\/[\d]+$/) ) {
return false;
}
var parts = str.split( "/" );
var nYear = Number(parts[0]);
var nMonth = Number(parts[1]) - 1;
var nDay = Number(parts[2]);
// 月,日の妥当性チェック
if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) {
var dt = new Date(nYear, nMonth, nDay);
if( isNaN(dt) ) {
return false;
}
else if(
dt.getFullYear() == nYear &&
dt.getMonth() == nMonth &&
dt.getDate() == nDay ) {
return true;
}
else{
return false;
}
}
else{
return false;
}
};
</script>
<form method="get"
id="target_form"
target="my_ferame"
action="http://winofsql.jp/php_get.php"
accept-charset="utf-8">
<input type="submit"
name="send"
id="send_check"
value="送信" >
<table id="main">
<tr>
<td class="ttl">社員コード
</td>
<td>
<input type="text"
name="syainCode"
id="syainCode"
value=""
maxlength="4"
style="">
</td>
</tr>
<tr>
<td class="ttl">氏名
</td>
<td>
<input class="pass2"
type="text"
name="syainName"
id="syainName"
value=""
maxlength="50"
style="">
</td>
</tr>
<tr>
<td class="ttl">性別
</td>
<td>
<select class="pass2"
name="syainSex"
style="width:100px;">
<option value='0' >男性
</option>
<option value='1' >女性
</option>
</select>
</td>
</tr>
<tr>
<td class="ttl">生年月日
</td>
<td>
<input class="pass2"
type="text"
name="syainBirth"
id="syainBirth"
value=""
pattern="^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$"
maxlength="10"
style="">
</td>
</tr>
<tr>
<td class="ttl">給与
</td>
<td>
<input class="pass2"
type="text"
name="syainKyuyo"
id="syainKyuyo"
value=""
pattern="^[0-9]+$"
maxlength="7"
style="">
</td>
</tr>
</table>
<input type="submit"
name="send"
id="send_update"
value="更新">
<input type="button"
name="cancel"
id="button_cancel"
value="キャンセル">
</form>
<iframe name="my_ferame"
frameborder="1"
scrolling="yes"
width="400"
height="200" >
</iframe>
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
