为什么我的提交按钮不能正常工作？

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>

Answer 1

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

Answer 2

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