Get Previous Value on Input Event

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 :)

getting old value from change event

You can persist old value in a cache which can be manipulated using .data() method.

Additionally, if required use defaultValue property to get the default value as originally specified in the HTML that created this object. It can be fetched using .prop() method

$('#date').change(function(event) {  var currentValue = $(this).val();  var previousValue = $(this).data('previousValue');    //if you want to get original value set in html  var defaultValue = $(this).prop('defaultValue');  
  //set currentValue as previousValue  $(this).data('previousValue', currentValue);    console.clear();  console.log("previousValue: " + previousValue);  console.log("currentValue:" + currentValue);  console.log("defaultValue: " + defaultValue);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="date" id="date" value="2020-01-21">

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/

How do I get the previous value of a field in React? I want to use it to display the user's previous input when they click 'edit' on the field

To have a copy of the old value, you can use a ref.

  const [editingText, setEditingText] = useState("")
  const oldText = useRef("")
  
  const onClick = () => {
    oldText.current = editingText
    // now the oldText.current holds the old value
    setEditingText("Hello World")
  }

  ...

The difference of using a state vs a ref is that the ref doesn't trigger render, so might help you reduce unnecessary rendering. However in your case, maybe you can try using a state as well.

But you get the point, if you need a previous value, you need to create another variable. You could think the hook state is just a variable. Thus use your general programming logic sense then.

Get the previous value on a keyup event

You might save the previous value in data props of the input on keydown.

$(document).ready(() => {  $('input').on('keyup', e => {    // this is the condition for now, it need to be edited    const condition = !$(e.target).data('previousValue').length && e.keyCode === 8;    if (condition) {      console.log('GOTCHA'); // this fires before it should be fired    }    console.log($(e.target).val().length + ', ' + e.keyCode);  });  $('input').on('keydown', e => {    console.log($(e.target).val().length + ', ' + e.keyCode);    $(e.target).data('previousValue', $(e.target).val());  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><input type="text"><span></span>