SPIRAL ver.2でフォームを作成し、いざJavaScriptを組み込んで便利にしようしたときに「あれ？　うまく動作しない」ということはありませんか？
本記事ではフォームブロックにjavaScriptを組み込む際の気をつけなければいけないところや
知っていると設定しやすくなるコツについて案内いたします。

HTMLとjavaScriptが別の設定として管理される

ページやブロックでcss・javaScript・PHPはフォームなどのHTMLとは別枠で管理されています。

▼javaScriptの設定枠

すべてのステップで実行される

CSS・JavaScript・PHP の設定内容は、すべてのステップで実行されます。
例えば登録フォームブロックの場合、「入力」「確認」「完了」などの複数ステップで構成されていますが、
どのステップでも共通して読み込まれます。
そのため、「どのステップで実行したい処理なのか」を整理し、必要なステップでのみ動作するようJavaScriptを制御する必要があります。

例えば入力ステップではラジオボタンがあっても、確認ステップでは選択内容のみが表示され、ラジオボタン自体は表示されません。
そのため、「ラジオボタンを指定するjavaScript」を設定している場合に確認ステップを表示した際に、
読み込むべきラジオボタンがないため、javaScriptのエラーが発生する場合があります。

対応としては PHPで現在のステップ情報を取得 したり、「ラジオボタンが選択されたときのみ動作する」など、
入力ステップ以外では条件を満たさないよう制御することで、不要なステップでのエラーを防ぐことができます。

JavaScript例

指定の名前のラジオボタンが選択されたら「選択されました」とメッセージを表示する。

document.addEventListener('DOMContentLoaded', function () {
  // ①name="f0X" のラジオボタンをすべて取得
  const radios = document.getElementsByName('f0X');

  // ②指定のラジオボタンが存在しない場合は何もしない
  if (!radios || radios.length === 0) return;

  // ③ラジオボタンが選択されたら処理を実行する
  radios.forEach(function (radio) {
    radio.addEventListener('change', function () {
    // ④メッセージを表示
      if (this.checked) {
        alert('選択されました');
      }
    });
  });
});

標準でページ表示時に読み込まれるjavaScriptの処理について

ページやブロックにはcssやjavaScriptの設定メニューがありますが、それとは別にページやブロックの設定で自動的に読み込まれるjavaScriptがあります。

例えばフォームブロックを使用しているページであれば、同意ボタンのチェックによる送信ボタンの有効/無効化やステップ情報などのパラメーターをURLに付与する処理などの様々な動作のjavaScriptが自動で追加されます。
行われる処理の中には一部セキュリティ上の対応のための処理も行われているため、それらが読み込みが完了する前にJavaScriptを動作させようとしたりする場合はうまく動作しない可能性があります。

引っかかりやすい処理について

標準でページ表示時に読み込まれるjavaScriptの処理について

上記のようにページ読込時に処理を行っている関係上、読み込み終わる前にページを送信させたりすると
エラーになってしまうケースがあります。

例えば指定のページを表示したら自動でログアウトしたい場合ですが、
認証エリアからログアウトさせるためのログアウトリンクやボタンに「data-logout」という属性をつけることで、
ログアウトの処理を行っていますが、ログアウト用のjavaScript実行完了前にログアウトのリンクやボタンをクリックしてもログアウトできません。
上記の場合はsetTimeoutなどを利用するなど、ページのJavaScript読み込み後に処理を行うようにしてください。

フォームのsubmit処理について

設問の内容をjavaScriptで表示非表示を切り替え、送信ボタンクリック時に回答内容をチェックして、
問題ない場合だけ送信したいといった場合によくあるフォームならform.submit()で送信を
実行することで実装可能です。

しかし、フォームブロックでは「標準の送信ボタンを押したこと」を条件に動作するものもあるため、
これらを動作させずにjavaScriptでformをsubmitさせた場合は正しく次のステップに進めない場合があります。

この場合は、標準の送信ボタンを非表示にし、別のボタンを用意してJavaScriptを実行したうえで、
問題がなければJavaScriptから標準ボタンの click イベントを発火させる方法が有効です。
こうすることで、必要な内部処理を保ったまま送信させることができます。

まとめ

ページで使用するブロックや設定内容によって、自動で読み込まれるJavaScriptは異なります。
ページ設定後にどのJavaScriptが読み込まれているかを確認したうえで、独自のJavaScriptを組み込むことで、意図しない動作やエラーを防止できます。

• JavaScript
• 公式