【JS】自作のHTMLフォームに承諾確認チェエックボックスをJSで

仕事で報告書をHTMLフォームから入力し、送信によって提出させることになっているのですが。

件数が増えたために入力漏れや内容間違いが増えてしまいました。

バリデーションを増やして対応しようかとも思いましたが、あまりITリテラシーの高い職場ではないので・・・

協議の結果、送信ボタンを押す前に一息入れる事に。

そこで承諾確認を利用して、流れでボタンを押せないようにしてみました。

流れ

HTMLフォームに用意したボタンを、ユーザーの操作で押せたり押せないようにするので、苦手ですがJavascriptを使う事に。

で、ワードプレスをフレームワークとして使用しているため、外部JSファイルを読み込ませなければなりません。

ざっくりとした流れは、

・HTMLフォームに承諾確認用のチェックボックスを用意
・JSファイルを用意
・ワードプレスのテーマにJSファイルを読み込ませる

という感じでしょうか。

承諾確認という言葉は便宜上使っているだけで、チェックボックスオンでボタンを押せる、チェックボックスオフでボタンが押せない。という機能をJSで実現したいのです。

HTMLフォームの追加部分

まずは、チェックボックスをHTMLフォームに追加します。

<div style=" padding-top: 20px; padding-bottom: 10px;">
	<p>メール送信するにはチェックを入れて下さい。</p>
	<div style="font-size:x-large; font-weight: heavy;">
		<p><input type="checkbox" name="send-report-agree" value="1">レポートの内容に100%間違いはありません。</input></p>
       　　　　　　　　　　　　　　　　 <p><input type="checkbox" name="send-report-agree" value="2">入力漏れは200％ありません。</input></p>
	</div>
</div>
<input type="submit" class="sousinb" value="報告する">

ただチェックボックスを作成するだけですが、チェックボックスと送信ボタンの’name’属性はあとで使うので覚えておきます。

複数のチェックボックスに対応して、複数ステップになっても良いようにしてます。

急いで作ったので、CSSは直書きという体たらくですみませんｗ

JSファイルを用意

今回のメインとなるJavaScriptを作ります。submit_agreement.jsとでもしておきましょうか。

const submitButton = document.querySelector("input[type=submit][class=sousinb]");
const agreeCheckboxes = document.querySelectorAll("input[type=checkbox][name=send-report-agree]");

submitButton.disabled = true;

agreeCheckboxes.forEach(checkbox => {
    checkbox.addEventListener("change", function(){
        submitButton.disabled = !Array.from(agreeCheckboxes).every(checkbox => checkbox.checked);
    })
});

まずはquerySelector()で承諾確認で使用する送信ボタンとチェックボックスを取得し、submitButtonとagreeCheckboxesの変数にそれぞれ入れます。

inputのtype属性とおぼえておいたname属性で指定しています。

そして、送信ボタンは通常時押せないようにsubmitButton.disable = trueと設定。

で、チェックボックスの操作に応じて送信ボタンの動作が変わるように。

チェックボックスにすべてチェックが入ればボタンを押せるようになります。

JSファイルの読み込み

ワードプレスでJSファイルを読み込む場合は、wp_enqueue_script()を利用してfunctions.phpから読み込むことが推奨されています。

今回のsubmit_agreement.jsは特定のフォームだけで読み込ませたいので、is_singular()で読み込むページを限定させます。

function send_report_agreement(){
  if( is_singular( 'test_posts' ) ){
    wp_enqueue_script( 'send-agreement', get_stylesheet_directory_uri() . '/report/js/submit_agreement.js', array(), '1.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'send_report_agreement' );

wp_enqueue_script()の第一引数はハンドルなので、識別しやすいもので。

第ニ引数でJSファイルの場所をURLで指定。子テーマ内にあるので、get_stylesheet_directory_uri()を利用します。

第三引数は依存するライブラリ等があれば指定しますが、今回は無いのでarray()。

第四引数はバージョン番号を’1.0’で。

第五引数で読み込む位置を指定できますが、今回の承諾確認はページが読み込まれた後じゃないと動作しないので、フッター位置での読み込みとなるtrueを指定。

初期値のfalseだとhead部分で読み込まれるため、querySelectorが動作できません。

・・・ここが抜けてて、数分時間を無駄にしましたｗ

確認画面の実装以外での一呼吸

実は内容の確認画面を表示させていたのですが、入力者本人は間違ってるつもりが無いんでしょうね。

すーっとスクロールして送信ボタンを押してました。

で、後日「間違ってたので修正お願いします！」という。

気づいてくれるだけありがたいですが、ボタンを押すための一手間を加える事で修正が減ると良いなと思います。

と言っても、バリデーションの方が効率的だと思うので。

バリデーション実装までの措置として承諾確認による一呼吸を採用しました。

JS

Posted by ぽんぞう@…勉強中…