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

## 枕
こんにちは。世間はゴールデンウィークですねー。今年は大きな予定がないので、優雅にQiitaブログの更新をします。
ちなみに前回エントリ[session_cache_limiter指定でフォーム入力データを保持する](http://qiita.com/hibikikudo/items/cfd98f656b596db77be4)の続きです。

## 実現したいこと

1. モバイルサイトにプライバシーポリシーと、チェックボックスで「プライバシーポリシーに同意する」ボタン付きのフォームを作りたい。
2. 「同意する」ボタンを押さないと、submit（「入力内容を確認する」）ボタンを押して確認画面に進めない仕様にしたい。
3. さらに、遷移後の確認画面から「戻る」ボタンで戻った際に、残したい情報だけをキャッシュさせておきたい。
![登録予約フォーム.png](https://qiita-image-store.s3.amazonaws.com/0/119598/21351efb-1cde-c2db-3873-3fc632111042.png)
<br>
↓
<br>
![登録予約フォーム2.png](https://qiita-image-store.s3.amazonaws.com/0/119598/df902c93-d938-e1f2-5c33-c283e95fc739.png)

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

## 当初の実装
```html: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>
```
```js: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.に関して問題が発生しました。
[前回エントリ](http://qiita.com/hibikikudo/items/cfd98f656b596db77be4)で、入力内容を修正しようと確認画面から入力画面に戻ったときに、一度入力した内容が消えてしまうことを防ぐために、phpでキャッシュを保存する指定をしていました。
ところが、入力内容をキャッシュ保存してしまうと、「プライバシーポリシーに同意する」のチェックボックスもキャッシュ保存されてしまいます。
そうすると、「プライバシーポリシーに同意する」ボタンが最初から押された状態になり、JSで書いた.on('click', function(){});メソッドの部分が発火しません。
こうなっちゃう。
![登録予約フォームfail.png](https://qiita-image-store.s3.amazonaws.com/0/119598/fb8fb5b7-949a-7725-253c-8e47c7eda619.png)

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

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

- [input 要素 - #attr-autocomplete](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#attr-autocomplete)
- [フォームのオートコンプリートを無効にするには](https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion)

### autocomplete="off"の実装
```html: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>
```
```js: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)](http://www.w3schools.com/tags/att_input_readonly.asp)
- [input 要素 - 属性 (MDN)](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#Attributes)

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