特定のページに「次へ」ボタンを条件付きで表示する

特定のフォームページで「次へ」 ボタンを非表示にし、ユーザーがフォームフィールドでオプションを選択した後にのみ表示させたいですか?

このチュートリアルでは、小さなコード・スニペットを使ってこれを実現する方法を説明します。

コード・スニペットの追加

このスニペットは、Multiple Choiceのような、選択肢を選択する必要があるフィールドタイプで動作するように設定されています。他のフィールドタイプについては、jQueryセレクタを調整する必要があるかもしれません。

まず、以下のコード・スニペットをサイトに追加する必要がある。

サイトにカスタムコードを追加する際にヘルプが必要な場合は、サイトにカスタムPHPまたはJavaScriptを追加するガイドをご覧ください。

コード・スニペットのカスタマイズ

上のコード・スニペットでは、次のように置き換える必要がある。 1000 に実際のフォームIDを入力します。 行番号 9, 14そして 24.

また、以下を交換する必要がある。 10 で使用したいフォーム・フィールドのIDを指定する。 行番号 26 そして 27.

フォームIDを探すのに助けが必要な場合は、フォームとフィールドIDを探すガイドをご覧ください。

このコードでは、フォームの2ページ目に「次へ」ボタンを表示/非表示することを想定しています。別のページをターゲットにしたい場合は、単に data-page 属性の値。

これで完了です!このコードスニペットを配置すると、指定されたページの「次へ」ボタンはデフォルトで非表示になり、指定されたフォームフィールドでオプションが選択された場合にのみ表示されるようになります。

次に、ボタンを条件付きで表示する方法についてもっと知りたいですか?詳しくは、送信ボタンを条件付きで表示する記事をご覧ください。