2

I'm trying to set up a website where anyone can access it after filling out a form. I already set up the form with a few fields but my question is how can I use a JS cookie to check if the user has already submitted this form, if it has redirect them to the next page, if not wait until they submit the form and then redirect?

The data from the form does not need to be saved yet, this will be implemented later.

Desired functionality: User opens website, if they have submitted the form before, they just go straight to index page, if they are a new user who has not submitted the form, they fill it out, submit, and are redirected to the index page. Cookie expires in 6 months.

My code that doesn't seem to be working:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + exdays * 30 * 60 * 60 * 1000);
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }

      function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(";");
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == " ") {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      }

      function checkCookie() {
        var user = getCookie("filled_form");
        if (user != "") {
          window.location.replace("https://google.com/");
        }
      }
    </script>
  </head>

  <body onload="checkCookie()">
    <form id="form">
      <label for="fname">First name:</label><br />
      <input type="text" id="fname" name="fname" value="" /><br />
      <label for="lname">Last name:</label><br />
      <input type="text" id="lname" name="lname" value="" /><br /><br />
      <input type="submit" value="Submit" id="submit-button" />
    </form>
    <script>
      const form = document.getElementById("form");
      form.addEventListener("submit", function (e) {
        e.preventDefault()
        setCookie("filled_form", true, 60);
      });
    </script>
  </body>
</html>
Safwan Samsudeen
  • 1,645
  • 1
  • 10
  • 25
bicycle4431
  • 82
  • 10

1 Answers1

3

Use document.cookie.

To set it:

document.cookie = "filledForm=true; expires=<WHEN_YOU_WANT_THE_COOKIE_TO_EXPIRE>";

To retrive it:

let cookies = document.cookie;

NOTE: document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;. So you should split it or something like that.

To change it you should just reset it:

document.cookie = "filledForm=false; expires=<WHEN_YOU_WANT_THE_COOKIE_TO_EXPIRE>";

Check the docs here. For examples check this site

Safwan Samsudeen
  • 1,645
  • 1
  • 10
  • 25
  • Thanks for taking the time to answer! Does filledform=true; automatically link it to the form on the page? What if there is more than one form? How can I ensure the cookie is linked to the correct form? – bicycle4431 Aug 03 '20 at 04:04
  • You can set paths to cookies. Check the link to the docs. – Safwan Samsudeen Aug 03 '20 at 04:05
  • This thread may also help to understand more about "set" and "get" cookies: https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript – Bruno Monteiro Aug 03 '20 at 04:07
  • 1
    I've added a link to examples now. – Safwan Samsudeen Aug 03 '20 at 04:13
  • @bicycle4431 when you said in the first comment "What if there is more than one form?", is that your case? Please be very clear in your question to get the appropriate answer :) – Bruno Monteiro Aug 03 '20 at 04:18