How to Get Old Value with Onchange() Event in Text Box

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

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

How can I get old value in input's onChange event?

If the old value is not needed in the component state, use a ref like the following, you can change its initial value

const oldValueRef = React.useRef(0)

let onChange = (e) => {
    const oldValue = oldValueRef.current;
    let newValue = e.target.value; // let oldValue = will be here

    // after everything     
    oldValueRef.current = e.target.value;
}

<Input type="number" onChange={onChange }></Input>

Input jQuery get old value before onchange and get value after on change

The simplest way is to save the original value using data() when the element gets focus. Here is a really basic example:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/

$('input').on('focusin', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
});

$('input').on('change', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

Better to use Delegated Event Handlers

Note: it is generally more efficient to use a delegated event handler when there can be multiple matching elements. This way only a single handler is added (smaller overhead and faster initialisation) and any speed difference at event time is negligible.

Here is the same example using delegated events connected to document:

$(document).on('focusin', 'input', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change','input', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

JsFiddle: http://jsfiddle.net/TrueBlueAussie/e4ovx435/65/

Delegated events work by listening for an event (focusin, change etc) on an ancestor element (document* in this case), then applying the jQuery filter (input) to only the elements in the bubble chain then applying the function to only those matching elements that caused the event.

*Note: A a general rule, use document as the default for delegated events and not body. body has a bug, to do with styling, that can cause it to not get bubbled mouse events. Also document always exists so you can attach to it outside of a DOM ready handler :)

how to get previous value of textbox in jquery on change event

You almost got this right, but you forgot to update the data-old in your code, below is an example and jsbin

 $(".whitebox").on('change', function (event) {
   // on first change will be empty string
   // as no previous value was set
   var oldValue = event.target.dataset.old;
   console.log('old value', oldValue);

   // your code here

   // at the end assign new value to data-old attribute
   $(this).data('old', event.target.value);
   console.log(event.target.value);
 });

http://jsbin.com/jasaqiwuwo/

Get the old value of a widget from onChange event?

What you need is watch(), it will give you both newValue and oldValue.

<script type="dojo/watch" data-dojo-prop="value" data-dojo-args="prop,oldValue,newValue">
    document.getElementById("statusContainer").innerHTML = "Old Value: " + oldValue + ", New Value: " + newValue;
</script>

I have updated your fiddle here. Hope it helps.

FYI, your other solution won't work if I am using only keyboard (tabs to gain focus) and change the value.

How to get first value of textbox with change event using javascript?

You can use data attribute and set the default value in it. Then use onchange event listener and once the focus is removed from the input it will get the default value and the new value. Use parseInt to convert string to number before adding

function updateValue(e) {  let defaultVal = e.target.dataset.val;  let newVal = e.target.value;  e.target.value = parseInt(defaultVal, 10) + parseInt(newVal, 10)}

<input type='text' value='5' data-val='5' onchange='updateValue(event)'>

Vuejs get old value when on change event

This solution assumes that you need the old value only when handling the change coming from user input - which is probably the case, and not a generic model change. Below I added a sketch of solution watching all changes in if it's necessary, though perhaps it's better to control the other changes at the places they occur, and not in this component.

Drop v-model and replace it with manual handling.

It is important to note that "although a bit magical, v-model is essentially syntax sugar for updating data on user input events (...)". So without much harm you can remove it and handle the events directly, as you already almost do.

First, replace v-model with :value. The input will still follow the item.age updates, but will not update the age automatically.

<input type="text" name="qty"
       :value="item.age"
       @change="changeAge(item,$event)">

Then, in order to actually update the value, add item.age = event.target.value to changeAge, like this:

changeAge: function(item, event){
  alert(item.age);  // Old value
  alert(event.target.value);  // New value
  item.age = event.target.value;  // Actual assignment
}

Note: you may want to use @input instead, that's what v-model actually uses.

And that's it, it should do the trick. If you need to prevent the change, you can just omit the assignment, however, you need to reset the input value. item.age = item.age of Vue.set(item, 'age', item.age) may do the trick, but I'm not quite sure it will.

Note: event.target.value is a string, if you need a number, use parseInt().

Create a separate component instance for every item and create a watch there

In case you need to watch all the changes. However, if you need that, perhaps you should do that in some other place, not this component.

I don't have all the details ready, so I'll just the general draft: in your v-for, instead of plain <input>, you place another component, say <my-item>. You put v-model=item on it. Inside the component, you create the <input> and forward the value prop to it, as well as forward it's input/change events outside. In your component single item is a single prop, so you can attach a watcher directly to it. Relevant docs: Component Basics, Customizing Component v-model, Props.

---

Related Topics