111

I have a text input. A value is populated into it when the page loads. If the user changes anything in text box, then I want to get the changed value (the new value) and old value. But calling ELEMENT.value it only returns the changed/new value.

How do I get the old value?

Here is my code:

      <head>
        <script type="text/javascript">
          function onChangeTest(changeVal) {
            alert("Value is " + changeVal.value);
          }
        </script>
      </head>
      <body>
        <form>
          <div>
              <input type="text" id="test" value ="ABS" onchange="onChangeTest(this)">  
          </div>
        </form>
      </body>

11 Answers 11

206

You'll need to store the old value manually. You could store it a lot of different ways. You could use a javascript object to store values for each textbox, or you could use a hidden field (I wouldn't recommend it - too html heavy), or you could use an expando property on the textbox itself, like this:

<input type="text" onfocus="this.oldvalue = this.value;" onchange="onChangeTest(this);this.oldvalue = this.value;" />

Then your javascript function to handle the change looks like this:

    <script type="text/javascript">
    function onChangeTest(textbox) {
        alert("Value is " + textbox.value + "\n" + "Old Value is " + textbox.oldvalue);
    }
    </script>
8
  • 1
    The change that was suggested here is incorrect. First of all, once an alert occurs, the field has lost focus. Any change after that would occur after the onfocus event was fired. Second, the input field's onchange event doesn't fire until its lost focus. Mar 25, 2011 at 17:39
  • 2
    This works better if you're manipulating the value multiple times. The answer above (element.defaultValue) only works once. Up this one :)
    – user755404
    Jul 13, 2012 at 15:10
  • @GabrielMcAdams I understood what you are doing.. I have a question: doesn't it should be onchange="this.oldvalue = this.value;onChangeTest(this);" What I means first assign value then call function ? Jan 30, 2014 at 14:39
  • 1
    @GrijeshChauhan: No. We're setting the old value on focus. After that, after every change, we set it again. Jan 30, 2014 at 16:52
  • A more precise and better answer, since the user can change the value of a textbox multiple times so we need to revert it at every instance
    – sohaiby
    Apr 22, 2015 at 8:56
84

element.defaultValue will give you the original value.

Please note that this only works on the initial value.

If you are needing this to persist the "old" value every time it changes, an expando property or similar method will meet your needs

3
  • just a note. I discovered on firefox element.getAttribute("value") also seems to reveal the original... I don't know enough to tell if this is a cross-browser/standard thing. Oct 15, 2010 at 19:32
  • 57
    element.defaultValue returns the value set in the <input> tag. If this value has changed by editing or some other JavaScript, element,defaultValue will not return this (new) old value.
    – SabreWolfy
    Jan 23, 2012 at 12:59
  • Thanks SabreWolfy, spotted your comment and solved my problem. Had to change the value multiple times so doing the above was no good.
    – user755404
    Jul 13, 2012 at 15:11
7

You should use HTML5 data attributes. You can create your own attributes and save different values in them.

6

I would suggest:

function onChange(field){
  field.old=field.recent;
  field.recent=field.value;

  //we have available old value here;
}
3

A dirty trick I somtimes use, is hiding variables in the 'name' attribute (that I normally don't use for other purposes):

select onFocus=(this.name=this.value) onChange=someFunction(this.name,this.value)><option...

Somewhat unexpectedly, both the old and the new value is then submitted to someFunction(oldValue,newValue)

0
3

You can do this: add oldvalue attribute to html element, add set oldvalue when user click. Then onchange event use oldvalue.

<input type="text" id="test" value ="ABS" onchange="onChangeTest(this)" onclick="setoldvalue(this)" oldvalue="">

<script>
function setoldvalue(element){
   element.setAttribute("oldvalue",this.value);
}

function onChangeTest(element){
   element.setAttribute("value",this.getAttribute("oldvalue"));
}
</script>
2

Maybe you can try to save the old value with the "onfocus" event to afterwards compare it with the new value with the "onchange" event.

2

I am not sure, but maybe this logic would work.

var d = 10;
var prevDate = "";
var x = 0;
var oldVal = "";
var func = function (d) {
    if (x == 0 && d != prevDate && prevDate == "") {
        oldVal = d;
        prevDate = d;
    }
    else if (x == 1 && prevDate != d) {
        oldVal = prevDate;
        prevDate = d;
    }
    console.log(oldVal);
    x = 1;
};
/*
         ============================================
         Try:
         func(2);
         func(3);
         func(4);
*/
0

Maybe you can store the previous value of the textbox into a hidden textbox. Then you can get the first value from hidden and the last value from textbox itself. An alternative related to this, at onfocus event of your textbox set the value of your textbox to an hidden field and at onchange event read the previous value.

1
  • 2
    But, If we have some 100+ text boxes, in this case we need to have 100+ hidden variables, So is there any other way we can get old values?
    – CFUser
    Dec 15, 2009 at 20:06
0

Probably not the best solution, but as a workaround, tried in ReactJS with Material-UI (MUI). For a text input and using the onChange method, the initial value gets stored into:

event.srcElement._wrapperState.initialValue

And the previous value gets stored into:

event.target.attributes.value.value

The new value can be extracted as standard from:

event.target.value
0

This is an old post, I am sharing this for knowledge.

What I did so far is that I use element.defaultValue to get the old value, now the defaultValue always returns the value that was set in the value attribute, so when you do a successful change, just store the new value in the element value attribute:

element.setAttribute('value', [new value]);

Now what's interesting, is that element.defaultValue now returns the set value, and if for any reason you want to return to the old value before doing this setAttribute, you simply:

element.value = element.defaultValue;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.