HTML/JavaScript, form disable button

Question

I created a form, and a disabled button using the disabled attribute in the HTML file
...then I created a JS file, to make the button enabled when all the input fields (4) are filled with text (doesn't matter how many letters.. so I am not going to use .length and an operator bec again, it does not matter to me..) all that matters to me, is that the button is enabled as long as all the input fields are filled with data. or else, it stays disabled.

this is what I did so far.. and what it does, is when one of the inputs is filled with any text, it enables the button and disables it back when the user goes on to another input field.. why? what am I doing wrong here?

any help would be very appreciated

const input = document.getElementsByClassName('.fillform')
input = addEventListener('keyup', e => {
  if (e.target.value == "") {
    document.getElementById('submitBtn').disabled = true;
  } else {
    document.getElementById('submitBtn').disabled = false;
  }
});

<div class="container">
  <form action="https://formspree.io/f/myyvwpgn" method="post">
    <h1>Contact Me</h1>
    <div class="rowOne">
      <div class="col">
        <div class="inputbox">
          <input id="fillform" type="text" name="" required="required" placeholder="Enter your First Name" />
          <span class="text">First Name</span>
          <span class="line"></span>
        </div>
        <div>
          <input class="fillform" type="text" name="lastName" placeholder="Enter your Last Name" />
          <span class="text">Last Name</span>
          <span class="line"></span>
        </div>
        <div>
          <input class="fillform" id="email" type="Email" name="Email" required="required" placeholder="Enter your Email" />
          <span class="text">Email</span>
          <span class="line"></span>
        </div>

        <div>
          <input type="text" name="" placeholder="comments goes here" />
          <span class="text">Comment</span>
          <span class="line"></span>
          <div>
            <textarea required="required"> </textarea>
            <span class="text">More info</span>
          </div>

          <div>
            <button id="submitBtn" disabled type="submit">submit
                  </div>

`document.getElementsByClassName('.fillform')` <-- Change this to either `document.getElementsByClassName('fillform')` or `document.querySelectorAll('.fillform')` — Dai, Oct 03 '22 at 11:06
Your `` is missing its `name=""` attribute. Without it it won't be included in the `<form>` POST request.</form> — Dai, Oct 03 '22 at 11:07
`input = addEventListener(...)` <-- Change this to `input.addEventListener(...)`. — Dai, Oct 03 '22 at 11:08
@Dai when i changed it to input.addeventlistener INSTEAD OF the equal sign = this is the error i am getting.: Uncaught TypeError: input.addEventListener is not a function — asaf danan, Oct 03 '22 at 11:18
Yes, because [`input` is an HTMLCollection](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return), but you're also getting an error with the current code. — Teemu, Oct 03 '22 at 11:20
Read some answers at the linked post, they're telling you exactly what to do. — Teemu, Oct 03 '22 at 11:24
@Teemu what linked post? how can i find it? thank you so much btw.. — asaf danan, Oct 03 '22 at 11:28
In my comment above you can see some blue underlined text, that's a link ... — Teemu, Oct 03 '22 at 11:29

Lukas · Answer 1 · 2022-10-03T11:48:26.293

Without object you can do it like this.

let input = document.getElementsByClassName(".fillform");

let input1Filled = false,
    input2Filled = false,
    input3Filled = false,
    input4Filled = false;

input = addEventListener("keyup", (e) => {
    if (e.target.value == "") {
        if (e.target.getAttribute("inputId") === "input1") {
            input1Filled = false;
        } else if (e.target.getAttribute("inputId") === "input2") {
            input2Filled = false;
        } else if (e.target.getAttribute("inputId") === "input3") {
            input3Filled = false;
        } else if (e.target.getAttribute("inputId") === "input4") {
            input4Filled = false;
        }

        document.getElementById("submitBtn").disabled = true;
    } else {
        if (e.target.getAttribute("inputId") === "input1") {
            input1Filled = true;
        } else if (e.target.getAttribute("inputId") === "input2") {
            input2Filled = true;
        } else if (e.target.getAttribute("inputId") === "input3") {
            input3Filled = true;
        } else if (e.target.getAttribute("inputId") === "input4") {
            input4Filled = true;
        }

        if (input1Filled && input2Filled && input3Filled && input4Filled) {
            document.getElementById("submitBtn").disabled = false;
        }
    }
});

<div class="container">
    <form action="https://formspree.io/f/myyvwpgn" method="post">
        <h1>Contact Me</h1>
        <div class="rowOne">
            <div class="col">
                <div class="inputbox">
                    <input id="fillform" type="text" inputId="input1" name="" required="required" placeholder="Enter your First Name" />
                    <span class="text">First Name</span>
                    <span class="line"></span>
                </div>
                <div>
                    <input class="fillform" type="text" inputId="input2" name="lastName" placeholder="Enter your Last Name" />
                    <span class="text">Last Name</span>
                    <span class="line"></span>
                </div>
                <div>
                    <input class="fillform" id="email" inputId="input3" type="Email" name="Email" required="required"
                        placeholder="Enter your Email" />
                    <span class="text">Email</span>
                    <span class="line"></span>
                </div>

                <div>
                    <input type="text" name="" inputId="input4" placeholder="comments goes here" />
                    <span class="text">Comment</span>
                    <span class="line"></span>
                    <div>
                        <textarea required="required"> </textarea>
                        <span class="text">More info</span>
                    </div>

                    <div>
                        <button id="submitBtn" disabled type="submit">submit
                    </div>

Why to re-assign a value to `input` (`addEventListener` doesn't return anything), and then attach a listener to `window` instead of the form? — Teemu, Oct 03 '22 at 11:32
@Lukas thank you, but how can i do it instead of using obj? we have not learned it before.. and they are not expecting me to use that.. i need to do it in a way that i can truely understand and not just copy paste things and make them work.. if i ever actually want to get a job at this field.. could u give me a hint? or maybe explain what u did there that is different than what i did ? i'll google this obj. thing.. but what else is different? Thank you brother! — asaf danan, Oct 03 '22 at 11:33
@asafdanan without object you can do it like this. check update. — Lukas, Oct 03 '22 at 11:41
perfect !! im doing this from more than 15mins,but still i could not able to do it . appericiated logic !! keep it up . i will be definitely vote up !! — Rahul Mohanty, Oct 03 '22 at 12:20
@Lukas great!! I would also like, if that's ok with you (and if it is possible) to learn how to do it even without the "keyup" (e) =>. and with the if statement... , without the e.target.. is it possible to just give the variable itself the ".target" ? would love to get an example and solution also to this, thank you so much!!! voted up!!!! — asaf danan, Oct 03 '22 at 15:11
without event it doesnt have sense. e.target you can replace with input or e.target assign to a variable and then replace e.target with the name of the variable. — Lukas, Oct 03 '22 at 15:18

HTML/JavaScript, form disable button

1 Answers1