和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

メールフォームプロの便利な機能(1)

誰も使ってないと思うけどメールフォームプロには便利な機能があるんだよシリーズ。

2011-06-26 11:47:22
入力時間 / 09:07

私はメッチャ使ってますよ。メールフォームプロにはmfp.extensions.jsというファイルがありまして、このファイルをイヂることでフォームのチェックをかなり柔軟かつアグレッシヴにカスタマイズすることができるんです。スゴイ便利なんですけど、たぶん誰も使ってない度は一番高いんじゃないかな。

メールフォームプロの仕組み

メールフォームプロはいろんな場所でJavascriptが動いています。大きく分けると以下の3つ。

  • 最初の読み込み時のイニシャライズ
  • 各エレメントからフォーカスが外れた時
  • 確認画面ボタンを押された時

そしてmfp.extensions.js内にある3つの関数はそれに合わせて動作するんですね。
MFP_EX_ONLOAD ・・・ 最初の読み込み時に実行
MFP_EX_ELEMENT_CHECK ・・・ 各エレメントからフォーカスが外れた時に実行
MFP_EX_SUBMIT ・・・ 確認ボタンを押した時に実行

disabledで無視

さらにメールフォームプロではdisabledのエレメントを無視するという地味な機能が付いています。
document.getElementById('エレメントのID').disabled = true;
と書くと対象エレメントを無視するよ!という設定がJavascriptからできるんです。
document.getElementById('エレメントのID').disabled = false;
逆にこう書くと無視しないよ!という設定になります。この辺、ちゃんとセレクタ的なもの用意してあげたほうがいいですよね。次回は用意します。すいません。

つまりナニができるかってーと

例えばIDがrequestTypeという名前のチェックボックスにチェックが入っていたら
if(document.getElementById('requestType').checked)
document.getElementById('requestSelect').disabled = false;
else
document.getElementById('requestSelect').disabled = true;
のような式をextensionに入れるだけで分岐処理が簡単にできるってわけです。
あぁこんなにわかりやすいけど、分かりづらいんだろうなぁ・・・。

まぁとにかく便利なんですよmfp.extension.jsは。アップデートしてもこのファイルは基本的にかわらないし。
便利なんだってばよ!!!誰かつかってよ!!!

ちなみにもしこのファイルを使ってるという猛者がいたらコメントください。
だれかひとりくらいは使っててほしい・・・。

TAG

P.863