仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。

フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。

基本的な流れ

  1. フォームのsubmitを拾う
  2. 通常の送信はキャンセル
  3. 送信ボタンを無効化
  4. 送信先URLやフォームの入力値を取得
  5. 送信
  6. 受信後、送信ボタンを戻す

入力値をどう得るか、というのがポイントかと思います。

送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。

デモ

なんかお問い合わせフォーム的なものを用意しました。

まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。

(さらに…)