[jQuery] formにプレビュー機能をつける

フォーム入力しながら、実際どういう画面になるのか見せるためプレビュー機能を考える。
プレビュー機能と言ってもやり方は色々ありそう。とりあえず下記２点、実装できればなんとかなりそうかな。

• formに入力した情報を別のactionに渡す
• 別windowで開く

まずは、別windowで開く方法。
targetを指定してやれば良い。previewのactionに渡すためだけのformなのでdisplay:noneにしておく。

<form id="previewForm" action="preview.php" method="POST" target="preview" style="display:none"></form>

これだけでOK。formもaも同じでした。

次にformに入力した情報を別のactionに渡す方法。
これは、form内の要素をcloneして、preview用のformにappendしてやれば良さそう。
ただ、jQueryの仕様なのかoptionのselected属性とtextareaの値は上手くクローンできない。

        $('#submitForm input').each(function() {
            var ic = $(this).clone();
            $('#previewForm').append(ic);
        });
        $('#submitForm select').each(function() {
            var sc = $(this).clone();
            $(this).find('option:selected').each(function() {
                var oc = $(this).clone();
                oc.attr({selected:'selected'});
                sc.append(oc);
            });
            $('#previewForm').append(sc);
        });
        $('#submitForm textarea').each(function() {
            var tc = $(this).clone();
            tc.val($(this).val());
            $('#previewForm').append(tc);
        });

ちょっと強引かもしれないが、こんな感じで値をコピーできたので後はsubmitするだけ。

適当にプレビューボタンなりを置いて、そのボタンに下記のようにしてやれば動くはず。
appendしたものはsubmit後に全部消しておいたほうが良さそう。

$(function(){
    $('.preview').click(function(){
        $('#submitForm input').each(function() {
            var ic = $(this).clone();
            $('#previewForm').append(ic);
        });
        $('#submitForm select').each(function() {
            var sc = $(this).clone();
            $(this).find('option:selected').each(function() {
                var oc = $(this).clone();
                oc.attr({selected:'selected'});
                sc.append(oc);
            });
            $('#previewForm').append(sc);
        });
        $('#submitForm textarea').each(function() {
            var tc = $(this).clone();
            tc.val($(this).val());
            $('#previewForm').append(tc);
        });
        $('#previewForm').submit();
        $('#previewForm').children().remove();
    });
});