31
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

「プライバシーポリシーに同意する」ボタン付きのフォームを作る

Last updated at Posted at 2016-04-30

こんにちは。世間はゴールデンウィークですねー。今年は大きな予定がないので、優雅にQiitaブログの更新をします。
ちなみに前回エントリsession_cache_limiter指定でフォーム入力データを保持するの続きです。

実現したいこと

  1. モバイルサイトにプライバシーポリシーと、チェックボックスで「プライバシーポリシーに同意する」ボタン付きのフォームを作りたい。
  2. 「同意する」ボタンを押さないと、submit(「入力内容を確認する」)ボタンを押して確認画面に進めない仕様にしたい。
  3. さらに、遷移後の確認画面から「戻る」ボタンで戻った際に、残したい情報だけをキャッシュさせておきたい。 登録予約フォーム.png

    登録予約フォーム2.png

...そう、こんな感じに。

当初の実装

entry.php
<form name="signup" id="form" class="form" method="post" action="/entry/mobile_entry_confirm.php/" data-ajax="false" onSubmit="is_note_msg=false;">
--- 省略 ---
<a href="privacypolicy.html">プライバシーポリシーを読む</a>
      <label for="agree"> プライバシーポリシーを確認し、同意しました。</label>
      <input type="checkbox" name="agree_privacy" id="agree" value="" required="required" />
      <button name="confirm" type="submit" id="submit" value="submit" class="disabled-btn" readonly="readonly">入力内容を確認する</button>
    </form>
entry.php
//チェックボックスをチェックすると、「入力内容を確認する」ボタンがactiveになる
$(function() {
    $('#submit').prop('disabled', true);

    $('#agree').on('click', function() {
        if ($(this).prop('checked') == false) {
            $('#submit').prop('disabled', true);
        } else {
            $('#submit').prop('disabled', false);
        }
    });
});

これで一応完成!ですが...

キャッシュ問題

実現したいこと1.2.に関してはこれで完成なのですが、3.に関して問題が発生しました。
前回エントリで、入力内容を修正しようと確認画面から入力画面に戻ったときに、一度入力した内容が消えてしまうことを防ぐために、phpでキャッシュを保存する指定をしていました。
ところが、入力内容をキャッシュ保存してしまうと、「プライバシーポリシーに同意する」のチェックボックスもキャッシュ保存されてしまいます。
そうすると、「プライバシーポリシーに同意する」ボタンが最初から押された状態になり、JSで書いた.on('click', function(){});メソッドの部分が発火しません。
こうなっちゃう。
登録予約フォームfail.png

「プライバシーポリシーに同意」ボタンを二度押しすればいけますが、UXが最悪です。
というわけで、修正を試みます。

autocomplete="off"

この修正にはautocomplete属性を使いました。 「プライバシーポリシーに同意」ボタンのinput要素に autocomplete="off"を書き加えると...そこだけキャッシュが強制的に破棄されるようになるので、自動的にチェックが外れ、UXを損なうことなく再入力出来るようになりました。
なおautocomplete属性の解説はMDNの下記ページがさすがの詳しさです。

autocomplete="off"の実装

entry.php
<form name="signup" id="form" class="form" method="post" action="/entry/mobile_entry_confirm.php/" data-ajax="false" onSubmit="is_note_msg=false;">
--- 省略 ---
<a href="privacypolicy.html">プライバシーポリシーを読む</a>
      <label for="agree"> プライバシーポリシーを確認し、同意しました。</label>
      <input type="checkbox" name="agree_privacy" id="agree" value="" autocomplete="off" required="required" />
      <button name="confirm" type="submit" id="submit" value="submit" class="disabled-btn" readonly="readonly">入力内容を確認する</button>
    </form>
entry.php
//チェックボックスをチェックすると、「入力内容を確認する」ボタンがactiveになる
$(function() {
    $('#submit').prop('disabled', true);

    $('#agree').on('click', function() {
        if ($(this).prop('checked') == false) {
            $('#submit').prop('disabled', true);
        } else {
            $('#submit').prop('disabled', false);
        }
    });
});

これで、上手く動くようになりました!

readonly="readonly"

なおsubmitボタンに書いてある readonly="readonly"は、スマホでのタップ時にデフォルトキーボードを出さないために書いています。

詳しくは下記を参照。
- HTML input readonly Attribute (W3School)
- input 要素 - 属性 (MDN)

雑感

フォーム周りのコーディングはなかなかに面倒ですよね。それだけに面白みもあると言えますが。半分自分用のメモ書きですが、次にフォームを作る方の参考になれば幸いです。

31
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?