和田憲幸のブログ

確認画面の連結機能とDOMでエレメントの下にアラートを出してみる。

メールフォームで要望の多かった確認画面の連結機能。

メールフォームプロ2.0はいまこんなかんじです。

確認画面でフィールドの連結

今日付け加えた機能としては、以前から要望の多かった確認画面での連結機能。
くっつけたいフィールドをひとつにまとめて確認というやつですね。我ながらベストな形で解決したと思います。
ロジックの解説ですが、例えば住所のフィールドをまとめたいとき。

\

こういう感じで連結したいエレメント名とその間に入れたい文字を+でセパレートして定義します。
一応、それで終わり。あとはこれを実際の送信後に反映させるかどうするかをちょっと悩んでいますが、CSVへの落とし込みを考慮するとあくまでこれは管理画面上での反映であって、実際に送信されるものは特にこうである必要は無いかなという感じはしてます。

document.cookieの有効範囲を指定

レジューム機能でpathを指定していませんでしたがpathを通しました。ただ、今回の実装でわかったこととしてはIE6とIE7ではディレクトリ指定じゃないとdocument.cookieに書き込めないということ。Safari、Firefoxだとlocation.pathnameでOKですが、IEに関してはそれだとダメ。なので以下のようなコードでfixしてます。

var current_dir = location.pathname;
var current_dirs = new Array();
current_dirs = current_dir.split("/");
if(current_dirs[current_dirs.length-1] != ""){
    current_dirs[current_dirs.length-1] = "";
    current_dir = current_dirs.join("/");
}
document.cookie = name + "=" + val + "; path=" + current_dir + "; expires=";

簡単な解説をするとpathnameを一度「/（スラッシュ）」でセパレートした配列にして、配列の最後尾がファイル名であればファイル名を削る。nullであればそのままという処理です。これでIEでもdocument.cookieでpath指定がスムーズにいきます。ネットでいろいろ見るとpathnameをそのまま通すscriptを公開してるとこが多かったのですが、この場合動かないケースもあるので要注意ですね。

DOMでエレメント直下にエラーテキストを表示

DOMでエレメント直下にエラーテキストを表示させるようにしてみました。空のdivを置いてgetElementByIdでstyle.displayをblockにしてから、innerHTMLで中にエラーテキストを入れています。ただこれをやると高さが固定長では無くなってしまうので、使用の有無を選べるようにエラーテキストを表示させたい場合のみdivを配置すればOKな仕様です。エラーテキストに関しては自動で入れるべきか、あらかじめ入れておかせるべきかを検討中。

ということでザッとマイナーチェンジばかりですがこんなところでしょうか。
あとはもうちょっとコンバージョンに繋がるような機能を付けたいんだけど、まずはコードを最適化することが最優先かな。

• 深爪
• メールフォームプロ2.0開発（５）

• Perl
• 開発
• Javascript
• メールフォーム