Hide submit button based on select with multiple classes

Question

I have a form with 4 dependent select dropdowns. What I want is, to hide/disable the submit button until option from the last select is chosen.

const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0];
const submitButton = document.querySelectorAll(".button, .woof_submit_search_form");
document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0].addEventListener('change', () => {
  if (select.value === '0') {
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

<select class="f_select f_select_product_cat f_select_product_cat_0" name="product_cat">
      <option value="0">Select cat 1</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <select class="f_select f_select_product_cat f_select_product_cat_1" name="product_cat">
      <option value="0">Select cat 2</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <select class="f_select f_select_product_cat f_select_product_cat_2" name="product_cat">
      <option value="0">Select cat 3</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <select class="f_select f_select_product_cat f_select_product_cat_3" name="product_cat">
      <option value="0">Select cat 4</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
    <button class="button f_submit_search_form">SEARCH</button>

I don't have much control over form rendering, so my best option is to get both the button and the last select by class name, but as you can see they have multiple classes.

Tried also to get the select with getElementsByName("product_cat")[0] but also doesn't make it to work.

Any help appreciated.

Answer 1

The first issue I see is that you're setting the submitButton to disabled when the value is 0. But you perform that verification only when the value of it changes as you listen to change.

You have only one button, why would you use document.querySelectorAll to retrieve it? Simply uses querySelector. More than that, it is an issue here as you are trying to set a NodeList to disabled = true and not an element! For you to understand, here are both output.

querySelectorAll

NodeList [button.button.f_submit_search_form, disabled: true]
0: button.button.f_submit_search_form

Excellent, we now see why it did not work! We are trying to set disabled = true to a NodeList which form is similar to an array!

So, in our case, we just need one element, so we can just fix that by using querySelector.

querySelector

<button class="button f_submit_search_form" disabled="">SEARCH</button>

That looks much more like what we need: the button alone. And now, our .disabled makes sense and works!

const select = document.getElementsByClassName("f_select f_select_product_cat f_select_product_cat_3")[0];
const submitButton = document.querySelector(".button, .woof_submit_search_form");

select.addEventListener("change", () => {
  if (select.value === '0') {
    submitButton.disabled = true
  } else {
    submitButton.disabled = false
  }
})

That logic has a little flaw though: we are only setting submitButton to be displayed when the addEventListener occurs.

So we need in the HTML to add disabled by default, as per default, it will for sure not be set to anything else than default value.

<button class="button f_submit_search_form" disabled>SEARCH</button>

It now works, the button will be enabled ONLY if the last field value is anything else than 0.