Member Avatar for tllcll

Hi,

I would like to know how to check the current value and the previous value entered by user before changes.

for example, the form will allow user to enter customer number. The first time user enter 10 then change to 22

customer number : 10 -> change to 22

how do I get the previous value which is 10 in this case

  • 3 Contributors
  • 2 Replies
  • 121 Views
  • 4 Weeks Discussion Span
  • Latest Post Latest Post by zippee

Dani AI

Generated

A few practical options and gotchas to capture the "previous" value before a user edits a field.

asked for the previous value; has the simple client-side idea to snapshot on focus, and suggested keeping a hidden field to post the old value to the server. A slightly more robust, unobtrusive pattern is to snapshot per-element state with event delegation and the element dataset, then compare on change (or blur). This avoids globals and works for many inputs.

Example pattern (attach once to the form/page):

document.addEventListener('focusin', (e) => {
  const el = e.target;
  if (el.matches('input, textarea, select')) el.dataset.prev = el.value;
});

document.addEventListener('change', (e) => {
  const el = e.target;
  if (el.matches('input, textarea, select')) {
    const prev = el.dataset.prev ?? '';
    const curr = el.value;
    if (prev !== curr) {
      // handle: log, update UI, populate a hidden field, send audit to server, etc.
      console.log('changed from', prev, 'to', curr);
    }
  }
});

Notes and tips:

  • Use focusin for delegation because focus does not bubble. For mouse-initiated edits you can also capture pointerdown if needed.
  • For server-side integrity (never trust client values): query the stored value on submit and perform an authoritative compare or keep an audit/history table. Hidden fields are convenient for transmitting the client-side previous value, but validate on the server.
  • If you need per-keystroke history or to inspect the edit before it happens, consider beforeinput/input, but check browser support.
  • Troubleshoot: handlers must be attached before user interaction; autofill or programmatic changes can bypass focus handlers, so validate on submit.

Recommended Answers

All 2 Replies

Member Avatar for vivek vermani

Hi,

I would like to know how to check the current value and the previous value entered by user before changes.

for example, the form will allow user to enter customer number. The first time user enter 10 then change to 22

customer number : 10 -> change to 22

how do I get the previous value which is 10 in this case

try this:-

<input type="text" name="TxtBox" onFocus="javascript:var prevValue=document.formName.TxtBox.value;">

It may solve ur Problem.

Member Avatar for zippee

If you trying to save both data in a database, you can use hidden form variable to store the previous data and the text field for the current data. When submitted, both value will be post to you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.