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).
This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the expression did not return a function object.
The split() method splits a string into an array of substrings. The split() method returns the new array. The split() method does not change the original string. If (" ") is used as separator, the string is split between words.
To convert an object to an array you use one of three methods: Object.keys() , Object.values() , and Object.entries() . Note that the Object.keys() method has been available since ECMAScript 2015 or ES6, and the Object.values() and Object.entries() have been available since ECMAScript 2017.
JavaScript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. Array objects grow and shrink dynamically and can have any JavaScript value.
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:
Wrap your array in a jQuery instance and use jQuery's each
: $(formLevel2DDs).each(function(index, entry) { ... });
Use jQuery's $.each
: $.each(formLevel2DDs, function(index, entry) { ... });
Note that this is not the same function as above.
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);
});
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()
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With