フォームを実装する際に、プライバシーポリシーや利用規約といったページを送信前に「必ず」読んでもらうための実装方法の解説記事です。
完成のイメージはこんな感じ。
仕様をまとめます。
- ページを読み込んだ段階ではチェックボックスにはチェックできない
- チェックできないと送信ボタンを押せない
- プライバシーポリシー等のリンクを別タブで開く
- 元のページのチェックボックスにチェックが自動的に入る
- 送信ボタンが押せるようになる
こんな実装をしたので、備忘録として残しておきます。
一貫して、チェックボックスが操作できない仕様になっています。
それでは詳しく見ていきましょう。
スポンサーリンク
フォームの実装において特定のページを送信前に「必ず」読んでもらう方法
サンプルページは、以下のリンクから見ることができます。
難しいことはありませんが、HTMLとjQueryの解説をします。
HTMLの解説
<form action="complete.html" method="post">
<input type="checkbox" id="js-check" class="checkbox" required="required" onclick="return false;">
<a href="privacy.html" target="_blank" class="link">プライバシーポリシー</a>に同意する
<br>
<br>
<input type="submit" value="送信する">
</form>type属性がcheckboxのinputを見てください。
まず、required="required"でrequired属性を指定し、入力必須としています。
そうすることで、送信ボタンを押すと以下の画像のようになり、送信できません。
次に、onclick="return false;"とし、要素がクリックされた際に発生するイベントの処理を設定するためのonclick属性を指定します。
そして、return falseとすることで、チェックを入れる処理を中断させて、チェックボックスを操作させないようになります。
jQueryの解説
$(".link").click(function() {
$("#js-check").prop('checked', true);
});特に難しい部分はありませんね。
リンクをクリックしたら、チェックボックスのchecked属性をtrueにして、チェックされた状態にします。
遷移先のページから戻るとチェックされている、という状態になるのです。
ハマったポイント
今回ハマったポイントは、チェックボックスを操作できないようにするのに、onclick="return false;"を使わず、disabled属性を使っていたためです。
disabled属性を使ってしまうと、チェックボックスをrequired属性にしているにも関わらず、チェックしていなくても送信ボタンが押せてしまったのです。
おそらく、disabled属性でチェックボックスがないものとして扱われ、同時にrequired属性も効かなくなってしまったのでしょう。
HTMLとjQueryを、それぞれ以下のように書いていたのですが、思ったように動きませんでした。
<input type="checkbox" id="js-check" class="checkbox" required="required" disabled="disabled">$(".link").click(function() {
$("#js-check").prop('disabled', false).prop('checked', true);
});これだとチェックなしでも送信できてしまうんですね。
【まとめ】フォームの実装において特定のページを送信前に「必ず」読んでもらう方法
今回は、フォームを実装する際に、プライバシーポリシーや利用規約といったページを「必ず」読んでもらうための実装方法について解説しました。
フォームにはよく「利用規約に同意します」などのチェック項目がありますよね。
そういうのは形だけのサイトも多いと思いますが、今回はきちんと見てほしいから、というクライアントからの要望で実装しました。
おかげで今回、とても勉強になりましたね。
以上です。最後までお読みいただき、ありがとうございました。
最後に宣伝
ココナラで、コーディングの相談を受け付けています。
- CSSが上手く作れない
- JavaScriptが思ったように動かない
- ブログのデザインを修正したい
- 勉強中でわからないところがあるから教えてほしい
このようなお悩みを解決していますので、「こんなの解決できる？」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。
コメント