フォームの送信ボタンがクリックされたときに発生する
submitイベントの処理を設定します。Webブラウザーは、
フォームの送信ボタン(type属性が「submit」あるいは、
「image」input要素)がクリックされると、
送信ボタンを含んでいるform要素に記述されているaction属性のURLに対して、
form要素内のフォーム部品で入力・選択されている情報を送信します。
今回のサンプルコードは長いです。
実行結果はこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <form action="check.html" method="post"> <dl> <dt>お名前<em>＊必須</em></dt> <dd><input type="text" name="name"></dd> <dt>性別</dt> <dd> <input type="radio" name="gender" value="男性" id="gender_man"> <label for="gender_man">男性</label> <input type="radio" name="gender" value="女性" id="gender_woman"> <label for="gender_woman">女性</label> </dd> <dt>年齢</dt> <dd> <select name="age"> <option>選択して下さい</option> <option value="10代">10代</option> <option value="20代">20代</option> <option value="30代">30代</option> <option value="40代">40代</option> <option value="50代">50代</option> <option value="60代以上">60代以上</option> </select> </dd> <dt>スキル</dt> <dd> <input type="checkbox" name="html" value="XHTML" id="html"> <label for="html">HTML</label> <input type="checkbox" name="css" value="CSS" id="css"> <label for="css">CSS</label> <input type="checkbox" name="javascript" value="javaScript" id="javascript"> <label for="javascript">javaScript</label> <input type="checkbox" name="php" value="PHP" id="php"> <label for="php">HTML</label> </dd> <dt>コメント</dt> <dd> <textarea name="comment"></textarea> </dd> </dl> <input type="submit" value="送信"> </form> <script> $(document).ready(function(){ $("form").submit(function(){ if( $("input[name='name']").val()==""){ if( $("span").css("font-weight")!="bold"){ $("input[name='name']").css("border","1px solid red") .after("<span>お名前を入力してください</span>"); $("span").css({ "color":"red", "font-weight":"bold" }); } return false; } }); }); </script> </body> </html> |