Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!
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.
Now I type the word World in the textbox and click outside the textbox which fires the onchange event like this.
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?
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.
Now I type the word World in the textbox and click outside the textbox which fires the onchange event like this.
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?
Asked:
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get this solution by purchasing an Individual license!
Start your 7-day free trial.
I wear a lot of hats...
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
LVL 57
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)
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 :
Here is a working sample :
http://jsfiddle.net/z_acharki/qL5zn7wc/
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;
});
Here is a working sample :
http://jsfiddle.net/z_acharki/qL5zn7wc/
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?
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?
That could be achieved by excluding the value of the hidden field 1 from the second hidden field like :
Here is the updated fiddle :
http://jsfiddle.net/z_acharki/pbefgn2r/1/
var main_field = document.querySelector('[name="txt"]');
var hidden_field_1 = document.querySelector('[name="HiddenField1"]');
var hidden_field_2 = document.querySelector('[name="HiddenField2"]');
main_field.addEventListener('blur', function() {
hidden_field_2.value = this.value.replace(hidden_field_1.value, "");
console.log("The Hidden field 1 value is : " + hidden_field_1.value);
console.log("The Hidden field 2 value is : " + hidden_field_2.value);
});
Here is the updated fiddle :
http://jsfiddle.net/z_acharki/pbefgn2r/1/
Experts Exchange Solution brought to you by
Your issues matter to us.
Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.
Start your 7-day free trialIt's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML
From novice to tech pro — start learning today.
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get this solution by purchasing an Individual license!
Start your 7-day free trial.