WEBアプリケーション制作のご紹介

jQueryでノンリロードメールフォームを作る

  • このエントリーをはてなブックマークに追加
  • LINEで送る

jQueryでメールフォームをノンリロードで処理する

以前同じエントリーを公開していましたが、今見るとあまりに稚拙!なので、一端削除して書き直しました。また、今回は自作プラグインぽいものを使い、より簡単に作る方向で解説していきます。

まず、入力チェックにはjquery.validationEngineを使います。 詳しくはこちらで解説してますのでご参考にどうぞ。

自作したプラグインぽいものはこちらからどうぞ

めんどいから全部ちょうだい!って方はどうぞ

各ライブラリーやCSSを読み込みます

validationEngine.jquery.css" rel="stylesheet" type="text/css">
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
type="text/javascript" src="jquery.validationEngine.js"></script>
type="text/javascript" src="jquery.validationEngine-ja.js"></script>
type="text/javascript" src="jquery.validationEngine.nonreload.js"></script>

自作したjquery.validationEngine.nonreload.jsのセットアップ

&lt;script type=&quot;text/javascript&quot;&gt;
 $(function(){
    $(&#039;#formSample1&#039;).MyMailForm({
        &#039;button_check&#039; : &#039;入力内容を確認する &amp;Gt;&#039;,
        &#039;button_back&#039;  : &#039;&amp;Lt; 訂正画面へ戻る&#039;,
        &#039;button_send&#039;  : &#039;メールを送信する &amp;Gt;&#039;,
    });
 });
&lt;/script&gt;

#formSample1の部分は作成したフォームのidを設定して下さい。

あと適当にフォーム作って下さい。

サンプル1 サンプル2 サンプル3

ホント適当で構いません。ボタンの挿入とか確認画面とか勝手にやってくれます。どんなフォームでも大丈夫!とはいきませんが、普通のメールフォームならまず問題ないと思います。

メール送信の部分だけ次のページで解説致します。

PAGE TOP