autoConfirm.js

フォームの確認画面を自動生成します

Download the files

Sample

好きな魚(複数選択可)
好きな野菜

はじめに

autoConfirm.jsは、HTMLで作成されたフォームにclassを1つ追加するだけで、
簡易的に確認画面を生成します。

確認画面ではフォーム内の各種inputが入力値・選択値のテキストに置き換わります。

autoConfirm.jsはjQueryを利用します。
JavaScriptが有効な環境では任意のフォームに確認画面を付与することができますが、
JavaScriptが無効な環境では確認画面は付与されず、フォームはワンクリックで送信されます。

使い方

次の手順で、フォームに確認画面を追加することができます。

1, スクリプトを読み込む

ダウンロードしたファイルを解凍したら、3つのjsファイルを任意の場所に配置してください。
この例では、"js"というディレクトリ内に配置しました。

読み込むページの<head></head>内には次のように記述します。読み込む順番この順番を守ってください。

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="js/autoConfirm.js"></script>

2, フォームにクラス名を指定する

確認画面を表示させたい<form></form>のclassに"autoConfirm"を指定します。

<form method="post" action="hoge.php" class="autoConfirm">

もしも、既にclassの指定がある場合は、スペースを空け、その後に追加します。

<form method="post" action="hoge.php" class="myFormClass autoConfirm">

3, Back(戻る)ボタンを配置する

確認画面を表示させたい<form></form>内の任意の場所にBack(戻る)ボタンを配置します。
このボタンは、確認画面から入力画面に戻るためのボタンです。

classには"autoConfirmBack"を指定してください。

autoConfirm.jsを適用すると、Back(戻る)ボタンは確認画面でのみ表示され、入力画面からは表示されなくなりますが、
JavaScriptが無効な環境ではこの効力がありません。そのため、ここではstyle="display:none;"も併せて指定しておきます。

配置する場所は<form></form>内であれば、どこでも構いません。 複数の設置も可能です。

<input type="button" value="戻る" class="autoConfirmBack" style="display:none;">

ここまでの手順で、フォームは基本的な確認画面が表示されるようになっています。
一度動作を確認し、必要に応じて以降の手順を行なってください。

4, autoConfirm.jsの設定を変更する

一度、autoConfirm.jsをテキストエディタ等で開き、冒頭の設定を編集します。
特に重要な設定は次の4つです。 各々、説明に従い設定を書き換えます。
speedは0(ゼロ)を指定することで、フェードイン・フェードアウトのアニメーション効果をOFFにできます。

var confirmName = '確認'; //入力画面におけるSubmitボタンの値
var submitName = '送信'; //確認画面におけるSubmitボタンの値
var speed = 300; //アニメーションの速度(ミリ秒)
var convertLf = true; //プレビュー時、テキストエリアの改行をbrタグに置き換える

5, CSSをカスタマイズする

確認画面に表示されるユーザーの入力値は<span class="autoConfirmVal"></span>で囲まれています。
class"autoConfirmVal"に任意のCSSを設定することで確認画面の体裁を整えることができます。

その他・補足

一部のノード(タグ)を、入力画面では表示し、確認画面では非表示にしたい

入力のヒントや入力例等の記載は確認画面では表示したくないかもしれません。

このような場合はautoConfirm.jsの設定にあるconfirmHiddenClassにそれらのノードを指し示すclassを追加します。
デフォルトでは.error-message.hint-messageの2つのclassが指定されています。

var confirmHiddenClass = '.error-message, .hint-message';

class名の先頭に"."(ドット)を入力します。複数のclassを指定する場合は","(カンマ) で区切ります。

一部のノード(タグ)を、確認画面では表示し、入力画面では非表示にしたい

上とは逆のケースです。

このような場合はautoConfirm.jsの設定にあるconfirmVisibleClassにそれらのノードを指し示すclassを追加します。
デフォルトでは.confirm-messageというclassが指定されています。

var confirmVisibleClass = '.confirm-message';

class名の先頭に"."(ドット)を入力します。複数のclassを指定する場合は","(カンマ) で区切ります。

いくつかの約束

1, ラベルを指定する際は<label for=""></label>形式

チェックボックスもしくはラジオボタンを使用する際はこの点に留意してください。

デフォルトの設定では、確認画面に表示される値はvalue属性ではなく、
該当のチェックボックスもしくはラジオボタンを対象とした<label for=""></label>内のテキストです。

しかし、次のようなラベルの指定では正しく選択値が表示されません。

<label><input type="radio" name="vegetable" value="0">トマト</label>

このような場合、次のように指定してください。

<input type="radio" name="vegetable" value="0" id="vegetable_0">
<label for="vegetable_0">トマト</label>

また、チェックボックスもしくはラジオボタンについて
そもそもラベル内のテキストではなくvalue属性を確認画面に表示させたい場合は、
autoConfirm.jsをテキストエディタ等で開き、getLabelCRの値をfalseに変更してください。

var getLabelCR = false;