How to get old Value with onchange() event in text box

Question

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>

score 191 · Answer 1 · edited Mar 25 '11 at 02:29

191

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>

edited Mar 25 '11 at 02:29

Community

1
1

answered Dec 15 '09 at 20:27

Gabriel McAdams

54,482
10
60
76

27

I can understand you voting an answer down if it doesn't work, or if its an inappropriate answer. I provided an answer that solved the user's need. This code was tested. It is complete. And it does something the accepted answer doesn't (you can always look at the defaultValue property, but what if the user changes the value more than once?). – Gabriel McAdams Dec 16 '09 at 18:23
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. – Gabriel McAdams Mar 25 '11 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 :) – Jul 13 '12 at 15:10
Worked Beautifully for me. Thnx – Rohan Apr 24 '13 at 11:00
4

Simple and effective. Wish I could give you more than +1. – Ian Kemp Aug 13 '13 at 14:40
@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 ? – Grijesh Chauhan Jan 30 '14 at 14:39
1

@GrijeshChauhan: No. We're setting the old value on focus. After that, after every change, we set it again. – Gabriel McAdams Jan 30 '14 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 '15 at 08:56
This works for me on select tag – Immran Mohammed Mar 31 '20 at 17:57
at least in firefox, onfocus is skipped in a number field when you directly click on a directional arrow to change the number. onchange fires, causing oldvalue to be undefined. this messy workaround seems to work: onchange="if(typeof this.oldValue == \'undefined\'){this.oldValue=this.defaultValue;}callSomeFn(this.value, this.oldValue);this.oldValue=this.value;" – GregCatalano Nov 03 '20 at 19:03
Use [`data` attributes](/q/30417852/4642212) and [`dataset`](//developer.mozilla.org/docs/Web/API/HTMLElement/dataset) or [`Map`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) (storing _Element → old value_) instead of storing an arbitrary property on elements. – Sebastian Simon Aug 24 '21 at 16:27

score 78 · Accepted Answer · edited Apr 22 '14 at 22:41

78

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

edited Apr 22 '14 at 22:41

Brett Weber

1,821
18
22

answered Dec 15 '09 at 20:15

George

7,730
5
29
24

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. – cheshirekow Oct 15 '10 at 19:32
54

element.defaultValue returns the value set in the tag. If this value has changed by editing or some other JavaScript, element,defaultValue will not return this (new) old value. – SabreWolfy Jan 23 '12 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. – Jul 13 '12 at 15:11

score 7 · Answer 3 · answered Aug 19 '14 at 00:12

7

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

answered Aug 19 '14 at 00:12

tiwari.vikash

337
3
5

score 6 · Answer 4 · answered May 30 '11 at 15:16

6

I would suggest:

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

  //we have available old value here;
}

answered May 30 '11 at 15:16

krsnik

61
1
1

score 3 · Answer 5 · answered Jul 22 '15 at 11:08

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>

score 3 · Answer 6 · edited Dec 07 '11 at 17:25

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)

edited Dec 07 '11 at 17:25

Curtis

98,395
62
265
345

answered Dec 07 '11 at 17:01

Jon

47
1

this works fine for me: ` onFocus="this.oldValue = this.value;"` from: https://pretagteam.com/question/how-to-get-old-value-with-onchange-event-in-text-box (yes its been a decade since you answered this) – edwardsmarkf Oct 18 '21 at 17:24

score 2 · Answer 7 · edited Nov 07 '14 at 20:53

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);
*/

score 0 · Answer 8 · answered Dec 15 '09 at 20:04

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.

answered Dec 15 '09 at 20:04

Canavar

47,036
17
87
121

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 '09 at 20:06

score 0 · Answer 9 · answered May 20 '11 at 11:22

0

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.

answered May 20 '11 at 11:22

ownking

1,868
1
23
34

How to get old Value with onchange() event in text box

9 Answers9

Linked