8

I have three references to three drop downs on my page, and as each one is changed, I want to run a JavaScript function called validateForm();

My code is below:

jQuery(document).ready(function() {

    var drpSupplier         = document.getElementById('supplier');
    var drpChargeRate       = document.getElementById('formElementChargeRate');
    var drpIDSEmail         = document.getElementById('formElementEmailIDS');
    var formLevel2DDs       = new Array();

    formLevel2DDs.push(drpSupplier);
    formLevel2DDs.push(drpChargeRate);
    formLevel2DDs.push(drpIDSEmail);

    formLevel2DDs.each(function() {
        $(this).change(function() {
            validateForm()
        });
    });
});

But this code is giving me the error:

TypeError: formLevel2DDs.each is not a function

I am using jQuery version 1.8.3 (it is a legacy system).

9
  • 1
    Perhaps you meant forEach, or $.each(formLevel2DDs, function(){})?
    – Sampson
    Jan 16, 2014 at 14:30
  • 2
    Why jQuery and document.getElementById in the same snippet?
    – moonwave99
    Jan 16, 2014 at 14:32
  • 1
    @ciwan It's not necessary to use a loop in this case, just use .change on the array wrapped with jQuery
    – Anton
    Jan 16, 2014 at 14:45
  • 1
    @Anton: Nicely spotted! Jan 16, 2014 at 14:47
  • 1
    @Ciwan you need to wrap the array with jQuery like this : $(formLevel2DDs).change
    – Anton
    Jan 16, 2014 at 15:09

6 Answers 6

21

There is no each function on arrays.

As Anton points out in the comments, you don't need each at all for what you're doing; see below the fold.

But if you want each, you have three choices:

  1. Wrap your array in a jQuery instance and use jQuery's each: $(formLevel2DDs).each(function(index, entry) { ... });

  2. Use jQuery's $.each: $.each(formLevel2DDs, function(index, entry) { ... });

    Note that this is not the same function as above.

  3. Use forEach (MDN | Spec): formLevel2DDs.forEach(function(entry, index, array) { ... });

    Note that forEach is new as of ECMAScript5. All modern browsers have it, but you'll need a shim/polyfill for older ones (like IE8). Also note that the order of the arguments to the callback is different than either of the options above.


But to Anton's point, you can do that much more simply:

There's no reason to use getElementById directly in this case, it's not in a tight loop or anything, so:

jQuery(document).ready(function() {

    $("#supplier, #formElementChargeRate, #formElementEmailIDS").change(validateForm);

});

Note that I've also removed the wrapper function from around validateForm. You may need to add it back if validateForm has a return value, and you don't want that return value to be used by jQuery (specifically: if it returned false, jQuery would stop propagation and prevent the default action of the change event).

If you really wanted to have direct access to the DOM elements using those variables:

jQuery(document).ready(function() {

    var drpSupplier, drpChargeRate, drpIDSEmail;
    var formLevel2DDs       = [
        drpSupplier         = document.getElementById('supplier'),
        drpChargeRate       = document.getElementById('formElementChargeRate'),
        drpIDSEmail         = document.getElementById('formElementEmailIDS')
    ];

    $(formLevel2DDs).change(validateForm);
});
3
  • 1
    Could you please tell me, why the third option is not recommended? because jQuery object is heavy? Jan 16, 2014 at 14:32
  • 1
    Just curious, why is #3 not recommended.
    – j08691
    Jan 16, 2014 at 14:33
  • Of course (looking again), they are DOM elements in the OP's code! Reordered the options and removed the non-recommendation. Jan 16, 2014 at 14:53
7

If you want to use .each() you must wrap the array with jQuery like this

$(formLevel2DDs).each(function() {

It's not necessary to use a loop in this case, just use .change() on the array wrapped with jQuery

$(formLevel2DDs).change(function(){
       validateForm()
});
3

The native iterator function is forEach, not each.

The jQuery .each function takes just one argument, that being the callback. The callback function is passed two parameters: the index into the list, and the value. The callback is invoked such that the list value is also the this value.

With forEach, the parameters are passed in reverse order: the value is first, followed by the index. The native function also passes the entire array as the third parameter. The native function does not bind this when the callback is invoked unless a second parameter is passed to .forEach after the callback function. If there is such a parameter, it is used as the value of this in the callback.

The native iterator skips elements of the array that have not been set. The jQuery .each() does not skip such elements, instead always iterating from index 0 to length - 1.

0

try

$(formLevel2DDs).each(function() {
    $(this).change(function() {
        validateForm()
    });
});
0

added one line

jQuery(document).ready(function() {

    var drpSupplier         = document.getElementById('supplier');
    var drpChargeRate       = document.getElementById('formElementChargeRate');
    var drpIDSEmail         = document.getElementById('formElementEmailIDS');
    var formLevel2DDs       = new Array();

    formLevel2DDs.push(drpSupplier);
    formLevel2DDs.push(drpChargeRate);
    formLevel2DDs.push(drpIDSEmail);

    formLevel2DDs = jQuery(formLevel2DDs);//this line
    formLevel2DDs.each(function() {
        $(this).change(function() {
            validateForm()
        });
    });
});
1
  • formLevel2DDs = jQuery(formLevel2DDs); Jan 16, 2014 at 14:35
-3

use a for ... in loop

for(key in formLevel2DDs) { ... }
3
  • 3
    One shouldn't generally use for ... in to iterate through the numbered properties of an array.
    – Pointy
    Jan 16, 2014 at 14:35
  • jQuery.each() uses a for ... in loop.
    – mike
    Jan 16, 2014 at 14:42
  • jQuery only uses for ... in when the object being iterated is not an array. There are many reasons not to use for ... in for arrays, and they're described in several questions on Stackoverflow.
    – Pointy
    Jan 16, 2014 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.