フォームhtmlをそのまま確認画面にも使う方法

フォームを作ればそのhtmlをそのまま確認画面にも使えるという手抜きの方法。javascriptをフォームエレメントをspanタグに置き換えていくことで、フォームのhtmlをそのまま使えるのが最大の利点。

手抜きとはいうが、フォームと別にページを作るよう間違いが少なくてすむし、保守性がものすごく高い。javascriptが動作することが大前提なのだが、今自分のブラウザでは通常クリアされているとみてよい。
radio/checkboxボタンは、チェックされているものとチェックされていないものとでそれぞれ置き換える画像を用意する。このサンプルでは両者とも共通にしているが、もちろん分けた方がベターである。

textareaについては、ものタグはインライン要素だが、事実上ブロック要素のように表示されているので、spanタグで置き換えてしまうと、この前後の要素とつながってしまったりするかもしれない。その場合は、divタグなどに置き換えるのがよいと思う。

answerクラスがつけてあるが、表示上のスタイルをつけると、地のテキストが黒なのに対して、入力テキストが青で表示するなどとすることも容易である。

なお、この方法では、フォームエレメントをspanタグに置き換えてしまうので、値を引き継ぐことはできない。別途サーバに書きだしておく必要がある。

function view_mode () {

    var icon_tick = '<img src="img/tick.png" alt="○" \/>';
    var icon_blank = '<img src="img/tick0.png" alt="×" \/>';

    $("#form input[type=radio],#form input[type=checkbox]").each(function () {
        $(this).replaceWith($(this).prop("checked") ? icon_tick : icon_blank);
    });
    $("#form input[type=text]").each(function () {
        var val = $(this).val();
        $(this).replaceWith('<span class="answer">' + val + '<\/span>');
    });
    $("#form textarea").each(function () {
        var val = $(this).val().replace(/\n/g, "<br \/>\n");
        $(this).replaceWith('<span class="answer">' + val + '<\/span>');
    });
    $("#form select").each(function () {
        var val = $(this).find("option:selected").val().replace(/^\d+\-/, "");
        $(this).replaceWith('<span class="answer">' + val + '<\/span>');
    });

}