Change javascript variable to value in html form field

Question

I'm trying to assign a new value to a variable that is changed via a html form field and then by clicking a button. Also I want the variable that changes to update in the html file so that if I refresh the page, the new variable is still present and not replaced with the original variable

The variable beforenoonprice is a global variable

html

  <input class="input-small" id="beforeNoonNPSlot" type="text">

javascript

function updatePricingFunction(){
     beforenoonprice = document.getElementById("beforeNoonNPSlot").value();

    }

That fixed it sort of. But when I refresh the page the variable value goes back to the original value? — user3814247
– user3814247, Commented Jul 16, 2014 at 4:25
What browser? Values reset for me in Safari but not in Firefox — asimes
– asimes, Commented Jul 16, 2014 at 4:51
Chrome. The variables change onclick, but if I refresh page. Everything reverts to original values — user3814247
– user3814247, Commented Jul 16, 2014 at 5:10

Community · Accepted Answer · 2017-05-23 11:57:51Z

2

As Mritunjay mentioned, your original problem was using value() instead of value.

Regarding the resets, I became curious about how to prevent value resets in JavaScript myself and made a question: Prevent input value from resetting on refresh

It can be applied to your own code like this:

<input class="input-small" id="beforeNoonNPSlot" type="text">
<script>
    var myInput = document.getElementById("beforeNoonNPSlot");

    window.onload = function() {
        if (sessionStorage.getItem("autosave")) {
            myInput.value = sessionStorage.getItem("autosave");
            updatePricingFunction();
        }
    }

    myInput.addEventListener("keyup", function() {
        sessionStorage.setItem("autosave", myInput.value);
    });

    function updatePricingFunction() {
        beforenoonprice = myInput.value;
    }
</script>

To make this maintain the value if the browser is closed and then opened, instead use localStorage: https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage#localStorage

<input class="input-small" id="beforeNoonNPSlot" type="text">
<script>
    if (!window.localStorage) {
        Object.defineProperty(window, "localStorage", new (function() {
            var aKeys = [], oStorage = {};
            Object.defineProperty(oStorage, "getItem", {
                value: function(sKey) { return sKey ? this[sKey] : null; },
                writable: false,
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "key", {
                value: function(nKeyId) { return aKeys[nKeyId]; },
                writable: false,
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "setItem", {
                value: function(sKey, sValue) {
                    if (!sKey) { return; }
                    document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
                },
                writable: false,
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "length", {
                get: function() { return aKeys.length; },
                configurable: false,
                enumerable: false
            });
            Object.defineProperty(oStorage, "removeItem", {
                value: function(sKey) {
                    if (!sKey) { return; }
                    document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
                },
                writable: false,
                configurable: false,
                enumerable: false
            });
            this.get = function() {
                var iThisIndx;
                for (var sKey in oStorage) {
                    iThisIndx = aKeys.indexOf(sKey);
                    if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
                    else { aKeys.splice(iThisIndx, 1); }
                    delete oStorage[sKey];
                }
                for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
                for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
                    aCouple = aCouples[nIdx].split(/\s*=\s*/);
                    if (aCouple.length > 1) {
                        oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
                        aKeys.push(iKey);
                    }
                }
                return oStorage;
            };
            this.configurable = false;
            this.enumerable = true;
        })());
    }

    var myInput = document.getElementById("beforeNoonNPSlot");

    window.onload = function() {
        if (localStorage.getItem("autosave")) {
            myInput.value = localStorage.getItem("autosave");
            updatePricingFunction();
        }
    }

    myInput.addEventListener("keyup", function() {
        localStorage.setItem("autosave", myInput.value);
    });

    function updatePricingFunction() {
        beforenoonprice = myInput.value;
    }
</script>

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Jul 16, 2014 at 6:29

asimes

6,2025 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3814247 Over a year ago

This works. The value stays the same on refresh, but if I exit the web browser and relaunch the html file then the variable reverts back to the original value. So any thoughts on how to stop it from reverting back if the web browser closes?

asimes Over a year ago

@user3814247, localStorage (rather than sessionStorage) may do what you want. The code is long but can be found here: developer.mozilla.org/en/docs/Web/Guide/API/DOM/…

user3814247 Over a year ago

Using this link: developer.mozilla.org/en/docs/Web/Guide/API/DOM/… How do I assign document.getElementById("beforeNoonNPSlot"); to a variable that works with this script?

asimes Over a year ago

@user3814247, I updated the answer to show localStorage

user3814247 Over a year ago

With the code asimes provided it updates the code and keeps the value I change it to after I close and reopen browser, but the code breaks for the button that brings me to the option to save beforeNoonNPSlot to localStorage?

Collectives™ on Stack Overflow

Change javascript variable to value in html form field

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related