Hey all
I have a simple form that has ten dropdown select menus. Each has a default hidden option as a label, and each dropdown has a selectable option of between 0 and 5.
The submit/button is disabled by default, and I’m trying to set it up so that the button is only enabled once there’s a valid option selected from each of the dropdowns.
Can someone please point me in the general direction, resource or example for implementing this? I think I need a way to iterate over each select (a forEach?), but I can’t really work out the logic behind it to say “if all have a valid option selected, enable the button, if not, leave disabled”.
I have spent a few hours on Google, however nothing I can find seems to help in my case – it usually just points to validating where there’s one dropdown, not multiple instances.
Thanks!
edit:
I guess one way might be to get the value of each select into an array, and then check to see if any value in the array does not equal 0 – 5. Is there a simpler or cleaner way?
I would create a general event listener for the form dropdowns (1 event listener which handles them all) and then in that event listener you loop over form.dropdowns (<- not valid syntax) and return if you encounter one where the value is still the default value or where it doesn’t equal 0-5. Then at the end of the event listener, below the loop, you enable the button.
Create a function that checks each value, then call that function in an onblur event listener for your text inputs, on change for your drop downs. Your button should be disabled on load, and enabled in your function when values are all correct.
edit for on blur and on change for different input types.
Members
Online