【baserCMS4】メールフォームのsubmitの有効/無効制御
前回、お問合せフォームのボタンラベル変更に対応したのですが、「個人情報保護方針をスクロールして最後まで読むまで確認ボタンを押せないように修正してほしい」と再修正指示を受けました。スクロール量によって submit ボタンの有効／無効の切り替えをするのは、JavaScript の function 追加で対応できそうだったのですが、ちょっと手こずったのでカスタマイズ手順を共有します。
submit ボタンの初期状態を無効設定に。読んでほしい文章をスクロールありで追加して、スクロール量が対象文章の最後の行を表示する高さに達したら、有効に切換えるという手順を考えました。（今回は、対象文章の高さの92%で最終行が表示されました）
１．submit ボタンの初期状態を無効設定にする
テーマのElements/mail_form.php を編集して、ボタンの属性に ’disabled’ を追加します。
２．追加した文章のスクロールイベントを追加する
mail_form.php の submit ボタンのクリックイベント function の後ろに、対象文章のスクロールイベント function を記述します。
３．動作確認（１）
お問合せフォームを表示してみたところ、submit ボタンはスクロールに関係なく有効でした。console.debug()でイベント処理状況を確認すると、スクロールイベント function は実行されていて、ボタンの状態は disabled から enabled に変更されています。でも、ボタンは常に有効で押せるのです。
何が原因なのかわからず、ユーザーフォーラムを検索したところ、お問合せフォームの submit ボタンが無効で押せないという以下の質問が目に留まりました。
【m-single】メールフォームの「入力内容を確認する」がdisabledになってしまう
この質問に対する回答の中に「/lib/Baser/Plugin/Mail/View/Elements/mail_token.phpによりボタンが制御されている」という記述を発見して、mail_token.php のカスタマイズで解決できるのではないか？と仮説を立てました。
４．mail_token.php の確認
/lib/Baser/Plugin/Mail/View/Elements/mail_token.php をダウンロードして、テーマのエレメントに追加して、このエレメントが使用されることを確認するためにconsole.debug()を追加しました。
コンソールに、valid token と表示されることを確認できたので、このエレメントが使用されることが確認できました。試しにsubmit の有効化（removeAttr(’disabled’)）をコメントアウトしたところ、submit ボタンが無効になったので、ここでボタンを有効にしていることがわかりました。
このままでは、戻るボタン対応が無効化されているため、正しくない状態です。そこで、メールフォームに隠しフィールドを追加して、Token取得済であることを保持して、メールフォーム本体でスクロール量の判定と併せて条件として使用することにしました。
５．隠しフィールドの追加
隠しフィールドの初期値をfalseとして登録します。
６．mail_token.php に隠しフィールドへの値設定を追加
隠しフィールドのIDは、登録したフィールド名 ‘SetMailToken’ の先頭に ’RowMessage’ を付加した ‘RowMessageSetMailToken’ です。これを有効にします。
７．mail_form.php のスクロールイベント function に、隠しフィールドの条件追加
これだけでもボタンは無効になるのですが、見た目が有効時と変わらないので、無効状態のスタイルを mail_form.php に追加します。
８．動作確認（２）
対象の文章のスクロール前は、submit ボタンが無効表示されています。
最後までスクロールすると、submit ボタンが有効になりました。やったー！(∩´∀｀)∩
まとめ
お問合せフォームのボタン制御カスタマイズ手順は、以下のとおりです。
elements/mail_form.php の修正 (1) submit の初期状態にdisabled=disabledを追加 (2) 個人情報の保護方針をdiv id "privacy",style overfllow=scrollで追加 (3) 個人情報の保護方針のスクロールイベントfunction追加 スクロール量が内部テキストの高さの92%以上になったら、submitのprop disabled,falseに (4) submit のdisabled 時のスタイル追加
/lib/Baser/Plugin/Mail/View/Elements/mail_token.phpを、テーマのelementsにコピー
お問合せフォームに隠し項目(初期値false)追加
elements/mail.token.phpの修正 submitのremoveAttrを、$('RowMessage[フィールド名]').val(true);に変更
elements/mail_form.php の再修正 スクロールイベントのfunctionの、スクロール量がテキストの高さの92%以上かつ$('RowMessage[フィールド名]').val()==trueならsubmitを有効に、それ以外はsubmit無効に修正
試行錯誤して目的を達成できたので、とても有意義な年末年始の連休になりました。うれしい。
baserCMS のお問合せフォームのカスタマイズはあまり出番がないかもしれませんが、どなたかのお役に立てたらうれしいです。また何かネタができたら書きたいと思います。では。
