Why does my submit button not work properly?

Question

I have a form created using HTML and I have a submit button.
I am trying to have the submit button disabled if the fields are not filled out.
However, now even if the fields are filled out the button stays disabled.

const subButton = document.querySelector('.sbutton')

const inputTexts = document.querySelector('.input')

subButton.disabled = true


function clickedButton() {
  if (document.querySelector('.input').value === "") {
    subButton.disabled = true
  } else {
    subButton.disabled = false
  }
}

<div class="form">
  <section>
    <form action=[link] method="POST">
      <fieldset>
        <legend>Your Contact Info!</legend>
        <label class="firstname" for="firstname">First Name</label>

        <input class="input" type="text" id="firstname" name="name" placeholder="Your first name" required>

        <label class="lastname" for="lastname">Last Name</label>
        <input type="text" id="lastname" name="lname" placeholder="Your last name">
        <label class="email" for="email">E-mail</label>
        <input class="input" type="email" id="email" name="email" placeholder="Your e-mail" required>
        <label class="comments" for="comments">Additional Comments</label>
        <textarea class="input" placeholder="Anything else we should know!" id="comments" name="comments" required></textarea>
        <label class='input' for="timeofday">When is the best time of day to contact you?</label>
        <select id="timeofday" name="timeofday">
          <option value='Morning'>Morning</option>
          <option selected value="afternoon">Afternoon</option>
          <option value="evening">Evening</option>
        </select>
      </fieldset>
      <button class="sbutton" type="submit">Submit</button>

The disabled property is always true when applied. To disable the disabled property the property must be completely removed from the element. See https://stackoverflow.com/questions/32745276/explicitly-set-disabled-false-in-the-html-does-not-work — KreutzerCode, Jan 11 '23 at 09:10
@KreutzerCode — No. You are confusing the disabled *property* with the disabled *attribute* — Quentin, Jan 11 '23 at 09:10
@Quentin Oh damn. I have now looked again, but can not find any documented difference. Do you have resources on the subject of the differentiation? — KreutzerCode, Jan 11 '23 at 09:17
@KreutzerCode The property is a function that will either add or remove the attribute. It will not set the attribute to false / true. Just test it out yourself in dev tools. YOu see that the attribute not gaining the value true or false but will either be added or removed. — tacoshy, Jan 11 '23 at 09:21

score 0 · Answer 1 · answered Jan 11 '23 at 09:14

The issue is, that you never call the function clickedButton(). You need an eventListener that listens for change events within the inputs and then calls that function:

const INPUTS = document.querySelectorAll('input');
INPUTS.forEach(el =>
  el.addEventListener('change', clickedButton)
)

const subButton = document.querySelector('.sbutton')

const inputTexts = document.querySelector('.input')

const INPUTS = document.querySelectorAll('input');

subButton.disabled = true

INPUTS.forEach(el =>
  el.addEventListener('change', clickedButton)
)

function clickedButton() {
  if (document.querySelector('.input').value === "") {
    subButton.disabled = true
  } else {
    subButton.disabled = false
  }
}

<div class="form">
  <section>
    <form action=[link] method="POST">
      <fieldset>
        <legend>Your Contact Info!</legend>
        <label class="firstname" for="firstname">First Name</label>

        <input class="input" type="text" id="firstname" name="name" placeholder="Your first name" required>

        <label class="lastname" for="lastname">Last Name</label>
        <input type="text" id="lastname" name="lname" placeholder="Your last name">
        <label class="email" for="email">E-mail</label>
        <input class="input" type="email" id="email" name="email" placeholder="Your e-mail" required>
        <label class="comments" for="comments">Additional Comments</label>
        <textarea class="input" placeholder="Anything else we should know!" id="comments" name="comments" required></textarea>
        <label class='input' for="timeofday">When is the best time of day to contact you?</label>
        <select id="timeofday" name="timeofday">
          <option value='Morning'>Morning</option>
          <option selected value="afternoon">Afternoon</option>
          <option value="evening">Evening</option>
        </select>
      </fieldset>
      <button class="sbutton" type="submit">Submit</button>

Note, that you check only the first input. querySelector returns only 1 element (the first).

score 0 · Answer 2 · answered Jan 11 '23 at 09:18

Nothing on the page is calling clickedButton()

Attach an EventListener for changes on the form that calls this function.

var form = document.querySelector('form');
form.addEventListener('change', clickedButton);

Also when you are using querySelector you will only get the first element in the form which is a <input .... If you want to check for all you should use querySelectorAll.

But that function would return an array so then you need to check if all of them have text.

In that case you could do it like this.

function validateForm() {
  // Get all elements
  const elements = document.querySelectorAll("input");
  // Filter out elements that have no value, if there is more then 1 set disabled to true, else it is false
  const disabled = elements.filter((el) => el.value === "").length > 0 ? true : false;

  subButton.disabled = disabled
}

And if you are going with this way you need to call this function instead of the other one like this:

var form = document.querySelector('form');
form.addEventListener('change', validateForm);

Why does my submit button not work properly?

2 Answers2