jQuery でフォームを簡単に Ajax に対応させてしまう jQuery Form Plugin が凄く便利

以下のようなポップアップしたボックス上に Ajax フォームを構築して画面遷移させずに処理させるようなサイトを構築する際に便利です。

このような Ajax で動作するフォームを jQuery Form Plugin を使えば簡単に構築することができたので、具体的な方法を解説させて頂きます。英語で良ければ以下のページに使い方が乗っていますので参考にしましょう。

• jQuery Form Plugin

Ajax 対応のフォームを作成する方法

即興でフォームを作ってみます。comment.php をフォームのページとして話をすすめます。PHP と HTML と JS を理解していないと意味不明になるかもしれないですが、出来る限りの範囲で解説してみます。ちなみに、分かりやすいコードにするために、実際に動作確認せずに必要なコードのみを書いて掲載していますので（PHPの部分まで書くとキリがないので）実際に動作するかは分かりません、こんな感じで構築すれば動くんだということを理解して頂ければと思います。

HTML

まず HTML でフォームを作ります。フォームの部品は以下のように構築します。いくつも入力欄があっても問題ありません。

1
2
3
4
5
6

<div id="popup">
    <form id="myForm" action="comment.php" method="post">
        <textarea name="comment"></textarea>
        <input type="submit" value="Submit"> 
    </form>
</div>

JavaScript

jQuery 本体と jQuery Form Plugin を読み込んでいること前提で話を進めさせて頂きます。ライブラリを読み込み、以下のようなコードを書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

jQuery(function($)
{
    $.ajax({
        type: 'GET',
        url: "http://example.com/comment.php",
        dataType: "html",
        cache: false,
        success: function(data, status) {
            $('.popup').empty().append(data);
            popupForm();
        }
    });
 
    function popupForm()
    {
        $('.popup form').ajaxForm(function(res) {
            $('.popup').empty().append(res);
            popupForm();
        });
    }
});

内容としては、comment.php のフォームを Ajax で読み込んで .popup ボックスに出力した後 Ajax 対応にします。.popup ボックス上のフォームを送信すると、Ajax で送信して送信結果を取得してきてくれますので、.popup ボックスの中身を空にして、送信結果と差し替え、差し替えた結果の中にフォームがあれば再度 Ajax 対応にするという内容です。

実行結果サンプル

ポップアップウィンドウに comment.php のフォームが読み込まれます。

送信すると、このように送信結果を反映してくれます。この場合はフォームでエラーが発生した結果を反映してくれています。

送信に成功するとポップアップウィンドウが閉じます。送信に成功するとポップアップを閉じる方法はいろいろありますので、今回は省いていますので各自で書いてみて下さい。

おわりに

シンプルに伝えたいので工程をいろいろ省いて要点だけを書きましたが、返って意味不明になってしまったような気がします。とにかく、詳しいサンプルは公式サイトにありますのでそちらを参考に、雰囲気を日本語で確認したい人はこの記事で雰囲気を理解して頂ければこの記事のお役目は果たされるのかと思います。