Retrieve .val() from inputs on .focusout()
I have a series of dynamically generated inputs with the same class, eg:
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
After the user inputs data into each field I want to take that data and place it in the value field of a hidden input.
However, I am having trouble figuring out the best way to do this. So far I've tried:
$(".addressitem").focusout(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
and
$(".addressitem").change(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
But I cannot get anything to appear in console.
Could anyone point me in the right direction?
Answer
Both of your approaches should work as long as you define them inside the document.ready
event and you do not have any other script errors in your page.
$(function(){
$(".addressitem").change(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
$(".addressitem").focusout(function() {
var addressinput = $(this).val();
console.log(addressinput);
});
});
You may use your browser console to verify the existence of other script errors in the page.
Also remember that, change
event occurs on the text input fields when the focus is out. So you will see the console.log when user changes the focus from the textboxes. If you want instant updates, you should consider using keyUp
event
Here is a working sample.
EDIT : As per the comment : I had the fields generated by a Jquery click function. I had to move my code within the click function for it to work.
No you don't need to. You can simply use the jQuery on
delegation method. When you register an event handler with jQuery on, It will work for current and future elements(dynamically injected) in the DOM.
So your code will be
$(function(){
$(document).on("change",".addressitem",function() {
var addressinput = $(this).val();
console.log(addressinput);
});
});
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM