HTML forms remember last value

Moderator: Michael Reiher

Post Reply
ericnd01
Newbie
Posts: 11
Joined: Fri Sep 15, 2017 1:17 am

HTML forms remember last value

Post by ericnd01 » Thu Oct 18, 2018 9:14 pm

Is it possible to replicate the behavior of "Remember last value" in an HTML form? If so, how? I have a pretty extensive form created, but every time the connector is launched, the fields are empty. Is there a Javascript trick or something to be done on Switch or ConnectALL? Thanks!

ericnd01
Newbie
Posts: 11
Joined: Fri Sep 15, 2017 1:17 am

Re: HTML forms remember last value

Post by ericnd01 » Wed Oct 24, 2018 1:20 am

I was able to accomplish this using Javascript and cookies. If anyone knows an easier, more direct way please let me know.

Padawan
Member
Posts: 153
Joined: Mon Jun 12, 2017 8:48 pm

Re: HTML forms remember last value

Post by Padawan » Wed Oct 24, 2018 11:26 am

Is it possible to share your javascript? It could be useful for others having the same issue.

ericnd01
Newbie
Posts: 11
Joined: Fri Sep 15, 2017 1:17 am

Re: HTML forms remember last value

Post by ericnd01 » Fri Nov 16, 2018 8:01 pm

I tried to cleanup the code to provide just the relevant information, so I can't guarantee this will work as provided. Basically, I run onload="checkCookie()" to check if any cookies are saved (getCookie) and populate the form fields if they exist. Any changes to a field automatically updates the cookies (setCookie). There's probably a more efficient way to do this, but it works for me so I'm chalking it up as a win.

Code: Select all

<html xmlns:EnfocusConnectNS="http://www.enfocus.com/2013/EnfocusConnectMetadataPreset">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function setCookie(cookie) {
            document.cookie = cookie.id + "=" + encodeURIComponent(cookie.value) + ";expires=Tue, 1 Jan 2030 00:00:00 UTC; path=/";
        }

        function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = document.cookie;
            var ca = decodedCookie.split(';');

            for (var i = 0; i < ca.length; i++) {
                var c = decodeURIComponent(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 elements = document.getElementById("enfocusForm").elements;
            for (var i = 0, element; element = elements[i++];) {
                var cookieValue = getCookie(element.id);
                if (cookieValue != "") {
                    document.getElementById(element.id).value = cookieValue;
                }
            }

        }

        function getJobInfo(jobAttribute) {
            let urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(jobAttribute);
        }
    </script>
</head>

<body onload="checkCookie()">
    <form action="http://localhost" method="post" autocomplete="on" id="enfocusForm" novalidate="" name="EnfocusConnectMetadata" enctype="application/x-www-form-urlencoded">

        <div>
            <ul>
                <li id="cid_1" data-type="control_head">
                    <div>
                        <div>
                            <h1 id="header_1" data-component="header">
                                Connect Uploader
                            </h1>
                        </div>
                    </div>
                    <center><h4><script>document.write(getJobInfo("jobname"));</script></h4></center>
                </li>

                <li id="id_name">
                    <label id="label_name" for="name">Your name</label>
                    <div id="cid_name">
                        <input type="text" id="name" name="name" data-type="input-textbox" size="20" value="" data-component="textbox" onchange="setCookie(this)" />
                    </div>
                </li>
            </ul>
        </div>
    </form>
</body>

</html>

Post Reply