eFormプレビュー

eFormにプレビューは付けられないか？

そんなお言葉から始まったこの試み。
jot_exを作っている最中に、eFormというフォームメールリソースも、プレビューが無くて、いきなり送信になるのだとか…。
で、eFormにもプレビューが欲しいと言うことになったわけです。
しかし、6月にMODxに始めて触れてからあと1週間ほど(現在2009/07/24)で、2月になるのだが、未だにMODxの機能自体を使って実現しようと言うことには至ってないｗ
まあ、要するに、jot_exしかし、スニペットコールジェネレータしかり。すべてjavascriptで作っているという…角度を変えると本末転倒な話ｗ
でもでも、よくよく考えてみると、こういう事が出来てしまうMODxがすごいとも言えるのですけどね…。他のCMSで言うところのアドインとかプラグインという形ではないのですから…ねぇ。

と言うわけで、お試しサンプルはこちらです。 MODxをインストールするときに導入できるサンプルデータを使って実装してみました。
ちなみに、送信ボタンは無効にしてあります。プレビューだけ、お楽しみくださいｗ
デザインがぐだぐだなのは、このサイトで使っているデザインと、サンプルのテンプレートのスタイルが考慮されていないからです(爆)

実装方法ですが、相も変わらずjavascriptを使っています。ここからスクリプト本体を落としてください。
スクリプトの実装方法はスクリプト本体を実ファイルにして、デザインテンプレートにて<script src="ファイル名.js"></script>として呼び出すのが基本です。
注：javascriptはファイル拡張子が js じゃないと正しく認識されません。
<script language="javascript" type="text/javascript">
<!--
ここに記述する
/-->
</script>
と言う風にして、ドキュメントに埋め込んでください。

次はeFormのテンプレートにプレビュープレビューの仕掛けをします。
お使いになるテンプレートはMODxに添付のサンプルの仕様を前提に動作仕様を作成しています。
eFormの項目にはすべてname属性が必要であると言うことなので、name属性の付けられているフォーム部品をピックアップしてプレビューの対象にしています。
つまり、name属性のないフォーム部品はプレビューの対象にはなりません。
そして、項目の名前ですが、これは<label>タグのテキストをピックアップしています。
<label>タグにはfor属性で、フォーム部品のidを指定する必要があります。HTML的には必須ではないとは思いますが、PreView機能はこの関係を利用して項目名をピックアップしていますので、必須となります。フォーム部品にid属性がないか、<label>タグにfor属性が存在しない場合はエラーとなります。当然ながら、for属性とid属性の値が一致してない場合もエラーになります。

次は、プレビューエリアのデザインになります。
このページの下の方にテンプレートメーカーを用意しましたｗ
上の方の欄に、eFormのテンプレートを貼り付けてください。
プレビューのデザインを<div>タグを使うか、<table>タグを使うかで、それぞれのボタンをクリックしてください。
すぐ下の欄にプレビューの為のテンプレートが出力されます。
これをeFormのテンプレートに貼り付けてください。
場所は、特に制限はありませんが、おすすめは最後の項目と送信ボタンの間です。
この、プレビューのテンプレートはid属性を変更しない限りは自由にデザインを施しても大丈夫です。ただし、タグの構造を変更した場合はエラーになる可能性があります。
id属性の付いているタグの中にタグを追加したりしないようにしてください。外側に追加するのは問題は起こらないとは思いますが、100％の保証はいたしかねます。

そして、最後の仕上げはプレビューボタンの追加です。
<input type="button" value="PreView" onclick="displaypreview()" />
の1行を追加してください。value=の値は変更しても問題ありません。onclick属性は変更しないでください。
これも場所に制限はありませんが、送信ボタンの横がおすすめです。

プレビューエリアは最初は表示されていません。
プレビューボタンをクリックすることにより、表示されるようになります。