Avatar of maqskywalker
maqskywalker
 asked on

working with the HTML textbox onchange event with JavaScript

I saw this example
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange2

When you run it, it looks like this. So the textbox has the value Hello.

p1.PNG
Now I type the word World in the textbox and click outside the textbox which fires the onchange event like this.

p2.PNG

Is there a way to store the existing value of the textbox in a hidden field and also store the new text i typed in the textbox in a hidden field also, but separately.

So when I run the above example and then type World.

I want to store the existing value which is "Hello" in a hidden field called HiddenField1
and the new text that I typed in the textbox which is "World" in a hidden field called HiddenField2

What's the best way to do that?
HTMLJavaScript

Avatar of undefined
Last Comment
Zakaria Acharki

8/22/2022 - Mon
Ryan Chong

aside of onchange event, try look for onfocus event to store the previous value. similarly, look for onblur event in case you want to store the new value somewhere else (if there's necessary)
Zakaria Acharki

The best way for this case is to avoid the use of inline-events like `onchange / on..` (attaching the event from the HTML code is the old-fashioned way), you need to attach your event in the JS side by using `addEventListener()` method, and I would suggest the use of blur (the opposite of focus) that will fire once you leave the input (lose the focus).

For the first hidden field you could init it by default using the same default value of the text input, and for the second hidden field you must update the value every time the blur is triggered like :

document.querySelector('[name="txt"]').addEventListener('blur', function() {
    document.querySelector('[name="HiddenField2"]').value = this.value;
});

Open in new window


Here is a working sample :

http://jsfiddle.net/z_acharki/qL5zn7wc/
maqskywalker

ASKER
Zakaria,
I looked at your example that's close. The value stored in HiddenField1 is ok.

But I noticed the value being stored in HiddenField2 is the full string. I only want to store whatever I type in the texbox.

The texbox already contains "Hello" on page load.
So then if I type "testing 123" in the texbox after the word Hello , the only value I want saved in HiddenField2 is what I typed.
So HiddenField2 would contain the value "testing 123" not "Hello testing 123" like the fiddle is currently doing.

How do I revise it to do that?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Zakaria Acharki

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
maqskywalker

ASKER
thanks
Zakaria Acharki

Glad I could help.