javascript - TypeError: <Array>.each is not a function

Question

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).

Answer 1

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);
});