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 の input 要素の pattern 属性を利用して入力チェック
- HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )
- HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )
- input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性( この機能はブラウザによっては要注意 )
最近やっと、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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 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>
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理