どのように自分のAjaxお問い合わせフォームを作成する
のAjax（非同期JavaScriptとXML）は、Webデザインで非常に人気のあるツールとなっている。 このチュートリアルでは、ajaxをお問い合わせフォームをPHPとjQueryを使用することをお教えします。 ここでアクションのコードを参照してください。
ステップ1 - HTMLの
オフに物事を開始するには、新しいファイルを作成して呼び出すことができますがcontact.html、内側に 我々のように簡単なHTMLフォームを作成する場合：
<div class="loader">"/部" <div class="bar">"/部" <div id="container"> id="contactForm" method=""様式action="mail.php"> <p> <label for="name">名"/ラベル" <input id="name" name="name" /> "/ p" <p> <label for="email"> Eメール"/ラベル" <入力id="email" name="email" /> "/ p" <p> <label for="message">あなたのメッセージ"/ラベル" <textarea id="message" name="message" rows="4" cols="30"""/テキストエリア" "/ p" <p> <入力class="submit" type="submit" value="submit"/> "/ p" "/フォーム" "/部"
今我々はmail.phpを提出すれば標準の連絡先フォームがある
ステップ2 - PHPの
今我々にphpこれは私たちのフォームの結果を処理するmail.phpと呼ばれるファイルを作成したい。
"？のPHP /私たちの変数$名= $ _GET ['名前']; $ Eメール= $ _GET ['email']で$コメント= $ _GET ['コメント'を宣言/]; / /今日の日付$ todayis =日付を取得する（の"l、F jは、ﾝグラム：イア"）; / /メッセージ$ ="メッセージ"件名タイトルを設定します$メッセージ="メッセージ：$コメント\ Rは\ n出典：$名\研究\ Ñ返信：$ Eメール"; / /ここで電子メール電子メールアドレスを（"email@address.com"、$件名、$メッセージ）;？コールバック""！ -ディスプレイ感謝の意のメッセージ- ""H1の"<SPAN>はあなた<h10>ありがとうございます"？PHPの名前は$エコー？""/ h10""/スパン""/ H1の"<p> <SPAN>はお客様のメッセージを、できるだけ早く回答いたします。"/スパン"" / p"<h3>メッセージで送信される："/ H3の"<p> <SPAN>は"？PHPは$ todayisエコー？""/スパン""/ p" 私たちは、フォームから名前、電子メール、メッセージを収集するいくつかの変数は、次にphpのメールを使用して作成し、このページでは（）には、メールに指定されたアドレスは、送信する関数です。 このチュートリアルでは、iのためにemail@example.com使用している、しかし、あなたがどのように使用することができます。
一度は、この私たちはあなたのメッセージに感謝が表示されますが実行しています。 いくつかの我々が収集した情報を使用して。
ステップ3 - jQueryの
現在の巧妙な部分です。 我々は、jqueryのフレームワークをインクルードする必要が開始します。 場合は、jqueryのウェブサイトから、その後は、このダウンロードすることができますそれのように取り付けます。
<script type="text/javascript" src="yourDirectory/jquery.js"> 場合、その最初の時、jQueryの15日間のチェックを使用してjQueryのjavascriptのフレームワークは、多くの生きやすいように作成されます。 これは、関数を作成する別のページに移動することなく当社のフォームを送信します。 我々のようにこれを行うことができます。
/ /ページのロードを行う $（関数（）（ / /送信トリガアヤックス $（'＃のContactForm'）（送信関数（）（ / /フォームを非表示 $（'＃のContactForm'）非表示（）; / /ローディングバーを表示する $（'。）ローダ。））($('. bar'を追加する; $（'。バー'）の。css（（表示：'ブロック'））; / / Ajaxリクエストを送信する $（'mail.php'、（'）:$('#名の名前を取得します。ヴァル（）、 メール:$('#メール'）。ヴァル（）、 '）:$('#メッセージコメントヴァル（））、 / /データを返す 関数（データ）（ / /グラフィックを表示しない $（'。バー'）の。css（（表示：'なし'））; $（'。）ローダー（データ追加）; ））; / /ページに滞在 復帰はfalse; ））; ））;
このコードは、フォームを非表示にし、ローディングバーを表示するイベントは、フォームが送信されると、トリガされます。 $（）は、これは、GETメソッドを介してフォーム情報を送信mail.phpへのAJAX呼び出しを行う行が取得します 。 1回のajaxされ、その結果成功しているし、画面上に表示されます。 これは、contact.htmlページにmail.phpの内容を注入します。
ステップ4 - CSSの
最後のステップは、フォームに我々を見ることができますが正常に隠し事をすることを確認するいくつかのCSSのスタイルを追加することです。 のではないneccesityが、それがきれいに見える。
体（ フォントファミリー：ヘルベチカ; ） 。ローダー（ ） 。バー（ ディスプレイ：なし; 背景：）は（'AJAX対応loader.gif'URLを繰り返します。 余白左：20px; マージントップ：50px; 高さ：20px; 幅：230px; ） ＃のContactForm（ フロート：左; 位置：相対的な; 背景色：＃fdfdfd; 高さ：200px; ） ＃コンテナ（ パディング：20px; フロート：左; 位置：相対的な; 高さ：200px; 幅：100px; ）
ステップ5 -まとめる
場合は、一緒にこのようにする必要がありますあなたのcontact.htmlのすべてのコードを置く。
<html> <head> <script type="text/javascript" src="../jquery.js">"/スクリプト" <script type="text/javascript"> / /ページのロードを行う $（関数（）（ / /送信トリガアヤックス $（'＃のContactForm'）（送信関数（）（ / /フォームを非表示 $（'＃のContactForm'）非表示（）; / /ローディングバーを表示する $（'。）ローダ。））($('. bar'を追加する; $（'bar'に）に。css（（表示：'ブロック'））; / / Ajaxリクエストを送信する $（'mail.php'、（'）:$('#名の名前を取得します。ヴァル（）、 メール:$('#メール'）。ヴァル（）、 '）:$('#メッセージにコメントヴァル（））、 / /データを返す 関数（データ）（ / /グラフィックを表示しない $（'。バー'）の。css（（表示：'なし'））; $（'。）ローダー（データ追加）; ））; / /ページに滞在 復帰はfalse; ））; ））; "/スクリプト" <style type="text/css"> 体（ フォントファミリー：ヘルベチカ; ） 。ローダー（ ） 。バー（ ディスプレイ：なし; 背景：）は（'AJAX対応loader.gif'URLを繰り返します。 余白左：20px; マージントップ：50px; 高さ：20px; 幅：230px; ） ＃のContactForm（ フロート：左; 位置：相対的な; 背景色：＃fdfdfd; 高さ：200px; ） ＃コンテナ（ パディング：20px; フロート：左; 位置：相対的な; 高さ：200px; 幅：100px; ） "/スタイル" "/ヘッド" Bodyノ <div class="loader">"/部" <div class="bar">"/部" <div id="container"> id="contactForm" method=""様式action="mail.php"> <p> <label for="name">名"/ラベル" <入力id="name" name="name" /> "/ p" <p> <label for="email"> Eメール"/ラベル" <入力id="email" name="email" /> "/ p" <p> <label for="message">あなたのメッセージ"/ラベル" <textarea id="message" name="message" rows="4" cols="30"""/テキストエリア" "/ p" <p> <入力class="submit" type="submit" value="submit"/> "/ p" "/フォーム" "/部" "/ボディ" "/ HTMLの"
だから、自分だけの強力なAjaxのconatctフォームを作成してわずか2ファイルを使用します。 そのことは簡単です。 ダウンロードのコードを 、自分自身のためにしてください。
次のステップ、その場合は、ユーザに尋ねる質問に基づいて検証し、別のフィールドのような検証のいくつかの種類を追加することです。
スウィート＆非常に基本的なフォームの簡単なチュートリアル...
フォームattrメソッドポストの値..、グローバル変数、PHPファイルに慣れて$ _GET ..です なぜ？
こんにちはMonkeytail、ここでは、これので、ポスト、しかし私は、なぜ、この混乱見えるか確認することができますが無視されているフォームの前に、どこに行くキャッチ送信関数を使用しています。 $。得る（）、したがって我々 mail.php内の情報をキャプチャするの$ _GET、グローバルvarを使用するときに、Ajaxリクエストを解雇されたGETメソッドを指定します。 質問のおかげで
いずれかのphpでjqueryのコードを指定すると$ _POSTを使用していた：
$。アヤックス（（
タイプ：'投稿'、
のURL：'mail.php'、
データ：'名前='+ $（'＃名'）。ヴァル（）+
'＆Eメール='+ $（'＃メール'）。ヴァル（）+
'＆='コメント+ $（'＃メッセージ'）。ヴァル（））、
成功：（データ）関数（
$（'。バー'）の。css（（表示：'なし'））;
$（'。）ローダー（データ追加）;
復帰はfalse;
）
））;
もし誰かがジャバスクリプトていたポストを使用して、フォールバックオプションを離れるとオフになって、それらの提出をクリックする（戻りフォームのアクションを実行するだろうと通過していない）場合はfalse。 また、ポストには、フォームメソッドを変更する必要があります。
のTheresの入力エラー：
"
ステップ2 - PHPの
"？PHPの
/ /当社の変数を宣言する
$名= $ _GET ['名前'];
$ = Eメール$ _GET ['Eメール'];
$メッセージ= $ _GET ['コメント'];
"
$ messageはコメント$されている必要があります。
ニースぇ。 ThanXへ。
あなたはHi ...ありがとう。 あなたの投稿jqueryので自分の問題を解決しました。