Form submit button isnt toggle and no reaction to js code-CodePudding

stack developer and i am trying to understand why or how to correctly toggle my submit button on my form.

this is my html:

<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/mlevbeon"
        method="post">
        <table WIDTH="50%">
                <tr>
                    <tD><label for="full-name">Full Name *</label></td>
                    <tD><input  type="text" name="name" id="full-name" placeholder="First and Last" required></th>
                </tr>
                <tr>
                    <td><label for="email-address">Email Address *</label></td>
                    <td><input  type="email" name="_replyto" id="email-address"
                            placeholder="[email protected]" required></td>
                </tr>
                <tr>
                    <td><label for="message">Message *</label></td>
                    <td><textarea rows="10" name="message" id="message" placeholder="" required></textarea></td>
                </tr>
                <tr>
                    <td><label for="input-file">Input File Here - </label></td>
                    <td><input  type="file"></td>
                </tr>
                <tr>
                    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
                    <td></td>
                    <td><input id="submit" type="submit" value="submit" ></td>
                </tr>
        </table>
    </form>

here is my js:

const submitbutton = draft_2.getElementById("submit");
const input = draft_2.getElementById("full-name", "email-address", "message")


input.addEventListener("keyup", (e) => {
    const value = e.currentTarget.value;
    submitbutton.disabled = false;

    if (value === "") {
        submitbutton.disabled = true;
    }
})

I have called them on my VSC correctly from one to the other but i dont think the js is actully doing anything.

CodePudding user response：

Not sure what draft_2 is, so just going to replace it with document here. Otherwise show us where draft_2 is defined.

const submitbutton = document.getElementById("submit");
const inputs = document.querySelectorAll("#fs-frm input, #fs-frm textarea");

inputs.forEach((input) => {
  input.addEventListener("keyup", (e) => {
    const value = e.currentTarget.value;

    if (value === "") {
      submitbutton.disabled = true;
    } else {
      submitbutton.disabled = false;
    }
  });
});

and make the button disabled by default

<input disabled id="submit" type="submit" value="submit" >

CodePudding user response：

You can give "disabled" param to the button then in your "toggle" function, you can just true-false it. I think it will work.