Why does my submit button not work properly?-CodePudding

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 >
  <section>
    <form action=[link] method="POST">
      <fieldset>
        <legend>Your Contact Info!</legend>
        <label  for="firstname">First Name</label>

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

        <label  for="lastname">Last Name</label>
        <input type="text" id="lastname" name="lname" placeholder="Your last name">
        <label  for="email">E-mail</label>
        <input  type="email" id="email" name="email" placeholder="Your e-mail" required>
        <label  for="comments">Additional Comments</label>
        <textarea  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  type="submit">Submit</button>

CodePudding user response：

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 >
  <section>
    <form action=[link] method="POST">
      <fieldset>
        <legend>Your Contact Info!</legend>
        <label  for="firstname">First Name</label>

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

        <label  for="lastname">Last Name</label>
        <input type="text" id="lastname" name="lname" placeholder="Your last name">
        <label  for="email">E-mail</label>
        <input  type="email" id="email" name="email" placeholder="Your e-mail" required>
        <label  for="comments">Additional Comments</label>
        <textarea  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  type="submit">Submit</button>

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

CodePudding user response：

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