株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

51-06)  1.  .submit() イベント処理

jQueryでは、フォームの送信処理を実行する。

.submit() イベント
送信ボタンが押下された時に処理を実行する。

書式;
$("セレクター名").submit(function(){
      送信ボタンが押下された時実行する処理
});

51-06)  .submit() イベント  (フォームの送信イベント処理)  

 

フォームの送信を行なう

jQueryの書き方 /*------------------------------------ */
//51-06)  フォームに関するイベント処理 フォームの送信 .submit()
/*------------------------------------ */
$("form").submit(function(){
if($("input[name='name']").val()==""){
$("span").remove();
$("input[name='name']").css("border","1px solid red")
.after("<span>お名前を入力してください</span>");
$("span").css("color","red")
return false;
}
});
//エラー情報の削除
$("input[name='name']").blur(function(){
$("input[name='name']").css("border","1px solid black");
$("span").remove();
});
cssの書き方 -------------------
HTMLの書き方 <form action="./php/form_disp.php" method="post">
<dl>
<dt>お名前<em>(必須)</em></dt>
<dd><input type="text" name="お名前" /></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="性別" value="男性" id="gender_man" />
<label for="gender_man">男性</label>
<input type="radio" name="性別" value="女性" id="gender_woman" />
<label for="gender_woman">女性</label>
</dd>
<dt>年齢</dt>
<dd>
<select name="年齢">
<option>選択してください</option>
<option value="10代">10代</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
<option value="40代以上">40代以上</option>
</select>
</dd>
<dt>スキル</dt>
<dd>
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</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">PHP</label>
</dd>
<dt>コメント</dt>
<dd>
<textarea name="コメント"></textarea>
</dd>
</dl>
<input type="submit" class="btnStd_170 Gray" name="submit" value="送信" />
</form>

51-06) .submit() イベントの送信確認処理 :submit


必須お名前 :name  
性別 :sex  
年齢 :age  
スキル :skill  


必須コメント(全角) :comment  

送信時に必須項目チェックは省略しています。