Continuously monitor 3 text input fields using jquery

Question

I am trying to monitor 3 text input fields together. The following doesn't seem to work.

$(document).ready(function () {                
    $("input:text").each( function () {  
        $(this).change( function () {
            checkinputs(this));                            
        });
    });
});

Some insight please. I want to check on each of the input field keyups whether ALL of them conform to standards enforced by checkinputs().

In other words, when someone is typing in one of the fields, I want to monitor the current field and the other fields as well in real-time. This might not be as trivial as I think it is.

Unless `checkinputs` returns a function that does something, it's not going to work — adeneo, Aug 02 '16 at 21:10
yea thas ficxed it.. I need to make another function to call it DUH trhanks — marc, Aug 02 '16 at 21:11
`this` in the handler refers to the element so you don't need to pass it to the handler. Also the `each` loop is not necessary. `keyup` itself iterates through the collection. `$("input:text").keyup(checkinputs);` — undefined, Aug 02 '16 at 21:13
Possible duplicate of [Listening for variable changes in JavaScript or jQuery](http://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript-or-jquery) — cdaiga, Aug 02 '16 at 21:13

technophobia · Accepted Answer · 2016-08-03T16:23:53.450

2

Try simplifying your code like this:

$(document).on("change", "input:text", function (e) {
    checkinputs(this); //
});

function checkinputs(input) {
    console.log(input.value) // <-- do something with the input
}

Demo: JSFiddle

If that doesn't work, then you your problem is likely in the checkinputs function.

Note 2: You can bind to the nearest element that's already loaded on the page - document was used as an example.

UPDATE:

If you want to check all inputs on input change, then the triggers remain the same however the checkinginputs function will have to take all inputs. Here's how you do that:

$(document).on("change", "input:text", function (e) {
    var $inputs = $("input:text");
    checkinputs($inputs);
});

function checkinputs($inputs) {
    $inputs.each(function () {
        console.log(this.value)
    });
}

Demo: JSFiddle

edited Aug 03 '16 at 16:23

answered Aug 02 '16 at 21:25

technophobia

2,506
1
18
28

I did try this earlier but what I wanted was that all 3 inputs are always monitored on keyup. But it turns out that it isnt easy to do that. Only the current text field will have its listener activated. I will have to nest the on change with a call to check the other two fields as well. – marc Aug 02 '16 at 23:20
1

@asehgal I've updated the answer and the fiddle based on your comment. – technophobia Aug 03 '16 at 16:27
1

it's super easy. see the update. You simply capture the list of inputs you need to read anytime a change happens, and then when a change happens, you read the values of all those inputs. Note how that phrasing, if there was no code, can be directly translated into working code. – Mike 'Pomax' Kamermans Aug 03 '16 at 16:27
yes thats what i was getting at. Just didnt know how to do it in JS. You have nested a loop over all 3 input fields inside each input change when detected at the DOM level. Thanks for your solution ! – marc Aug 03 '16 at 20:14

Continuously monitor 3 text input fields using jquery

1 Answers1