同意チェックボタン

規約に同意しないと送信できないフォーム。同意チェックボタンににチェックを入れると、非活性だった送信ボタンが活性化し送信できるようさせる。

ただ、確認画面から戻ると同意のチェックはキャッシュで保存されてしまうのでチェックされたままでボタンは非活性の状態になってしまう。on(‘click’, function(){});メソッドの部分が発火しない。

じゃあキャッシュを保存せずに設定すればと思ったが、入力内容がそっくり消えてしまうと入力している側からすると嫌だよな。コメントで「修正で戻った際には再度同意ボタンを外して押し直してください」で対応しようと思ったが。それもイマイチ。

いろいろ調べてみたら「autocomplete属性」で「 autocomplete=”off”」を使い部分的にキャッシュを外すことができるようで。

REFERENCE フォームの自動補完を無効にするには - ウェブのセキュリティ | MDN
https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

なおかつ、同意するように促すコメントもチェックタイミングで表示させるようにした。

サンプルはコレ。別ページに移動して戻るとテキストフィールドに入力されたテキストはキャッシュされているが、同意のチェックは外れている。

<div>
<form name="signup" id="form" class="form" method="post" action="" data-ajax="false" onsubmit="is_note_msg=false;">

     <input type="checkbox" name="privacy" id="agree" value="" autocomplete="off" required="required" onclick="chkdisp(this,'ans1')">
       <span>同意します</span>
 <input type="text" class="sp-form-control" name="name" placeholder="ここはキャッシュされる" required value="">
      <button name="confirm" type="submit" id="submit" value="submit" class="disabled-btn" readonly="readonly">確認する</button>
<p class="center" id="ans1">同意確認をお願いいたします</p>
    </form>
</div>

<script type="text/javascript">

$(function() {
    $('#submit').prop('disabled', true);

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


 // ボタン注釈表示非表示
 function chkdisp(obj, id) {
  if (obj.checked) {
   document.getElementById(id).style.display = "none";
  } else {
   document.getElementById(id).style.display = "block";
  }
 }
</script>

NOTICES

記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

MEMORANDUM

調べて知り得た情報をせっかくなのでメモしとく

NOTICES