JavaScript編~クッキーを使ってフォームの送信を1度だけにする~

アンケートを送信してください

『かつまるアウトドア部Log』を見てくれましたか？

HTMLのソースコード

<form id="form" action="thanks.html">
  <input type="radio" name="answer">興味がない<br>
  <input type="radio" name="answer">これから見る予定<br>
  <input type="radio" name="answer">たまに見ている<br>
  <input type="radio" name="answer">とても気に入って見ている<br>
  <input type="submit" name="送信する" id="submit"><br>
</form>
<br>
<button id="remove">クッキー削除</button>

JavaScriptのソースコードと概要

document.getElementById("form").onsubmit = function () {
  if (Cookies.get("answered") === "yes") {
    window.alert("回答済みです。アンケートの回答は1回だけです。");
    return false;
  } else {
    Cookies.set("answered", "yes", { expires: 3 });
  }
};

//クッキー削除プログラム
document.getElementById("remove").onclick = function () {
  Cookies.remove("answered");
};

ライブラリーから読み取り

今回はクッキーを操作するので、オープンソースでも提供されているjs-cookieライブラリーを利用しています。
クッキーの操作もそうですが、定型的でよく使用される処理はライブラリーから読み取ることで、複雑なコードを書く必要がなくなり、メソッド1つで実行してくれます。

JavaScriptの中身

document.getElementById("form").onsubmit = function () {
　送信ボタンがクリックされると実行
};

Cookies.getメソッドは、読み込んだjs-cookieライブラリーが提供している機能で()内に指定されたクッキーの値を読み取ります。

if文のtrue実行後、return falseで基本動作をキャンセルし、thanksページへ移行しないようにしています。

クッキーに変数をセット

Cookies.set("クッキー名", "値", { expires: 有効期限 });

これもjs-cookieライブラリーが提供するメソッドです。
クッキーのデータには有効期限があり、今回は3日に設定しています。それ以降はクッキーデータが消えてしまいます。
※設定をしないとブラウザを閉じた瞬間に消える！

アンケート送信　１度しか送信できません！