Javascript Setting Cookie to Remember form Submission

Question

I've managed to create a form and set a cookie to remember that the user has submitted the form, but the code looks very complicated. Is there not a simpler way to do this? What can I remove? I am NOT SAVING any input data. I just need to ensure that a user fills out the form and is then redirected to the index page. Then when they try to open the page again, they don't have to fill out the form.

<html>
<head>
    <title>Document Title</title>
    <script type="text/javascript">
        cookie_name="landasp"
        expdays=365

        function set_cookie(name, value, expires, path, domain, secure){
            if (!expires){expires = new Date()}
                document.cookie = name + "=" + escape(value) +
            ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
            ((path == null) ? "" : "; path=" + path) +
            ((domain == null) ? "" : "; domain=" + domain) +
            ((secure == null) ? "" : "; secure");
        }

        function get_cookie(name) {
            var arg = name + "=";
            var alen = arg.length;  
            var clen = document.cookie.length;
            var i = 0;
            while (i < clen) {
                var j = i + alen;
                if (document.cookie.substring(i, j) == arg){
                    return get_cookie_val(j);
                }
                i = document.cookie.indexOf(" ", i) + 1;
                if (i == 0) break;
            }
            return null;
        }

        function get_cookie_val(offset){
            var endstr = document.cookie.indexOf (";", offset);
            if (endstr == -1)
                endstr = document.cookie.length;
            return unescape(document.cookie.substring(offset, endstr));
        }

        function saving_cookie(){
            var expdate = new Date ();
            expdate.setTime (expdate.getTime() + (expdays*24*60*60*1000));

            Data="cooked"

            set_cookie(cookie_name,Data,expdate)
        }

        function get_cookie_data(){
            inf=get_cookie(cookie_name)
            if(!inf){
                document.getElementById("display1").style.display="block"
            }
            else{
                document.getElementById("display2").style.display="block"
            }
        }
    </script>
</head>

<body onload="get_cookie_data()">
    <div id="display1" style="display:none">
        <div class="register">
            <form action="index.html" onsubmit="saving_cookie()">
                <div>Name<br>
                    <input name="name" type="text" id="name" class="inputf">
                    <br>Tel<br>
                    <input name="tel" type="text" id="tel" class="inputf">
                    <br><br>
                    <input type="submit" name="Submit" value="Submit" class="button1">
                </div>
            </form>
        </div>

        <div id="display2" style="display:none">
            <div class="register">
                <p><strong>REGISTERED</strong></p>
            </div>
        </div>
    </body>
    </html>

Answer 1

Yes, the cookie scripts are normally that big. You can externalise them in a jsfile

However if you do not need the cookie on the server, we nowadays use sessionStorage or localStorage

Also reversing the test

NOTE this script completely replaces yours

const cookie_name = "landasp";
window.addEventListener("load", function() {
  const inf = localStorage.getItem(cookie_name);
  if (inf) {
    document.getElementById("display2").style.display = "block"
    setTimeout(function() {location.replace("index.html"},2000)
  } else {
    document.getElementById("display1").style.display = "block"
  }
  document.getElementById("regForm").addEventListener("submit", function() {
    localStorage.setItem(cookie_name, "done");
  })
})

adding an ID to the form and removing inline event handlers

<div id="display1" style="display:none">
  <div class="register">
    <form action="index.html" id="regForm">
      <div>Name<br>
        <input name="name" type="text" id="name" class="inputf">
        <br>Tel<br>
        <input name="tel" type="text" id="tel" class="inputf">
        <br><br>
        <input type="submit" name="Submit" value="Submit" class="button1">
      </div>
    </form>
  </div>

  <div id="display2" style="display:none">
    <div class="register">
      <p><strong>REGISTERED</strong></p>
    </div>
  </div>
</div>

Javascript Setting Cookie to Remember form Submission

Question

1 answers

solution1
1 ACCPTED 2020-05-07 06:21:28

Javascript Setting Cookie to Remember form Submission

Question

1 answers

solution1 1 ACCPTED 2020-05-07 06:21:28

solution1
1 ACCPTED 2020-05-07 06:21:28