Disable submit button if form not filled out

Question

I wanted to make he submit button on a form disabled if first name, email and comment isn't filled out. I made the button disabled in HTML (Submit). Here's a snippet.

The button stays disabled even when the columns are filled out and I don't know what else to do... I have tried many different ways but haven't found a solution yet.

 const submitBtn = document.getElementById('submit'); const firstName = document.getElementById('first-name') const email = document.getElementById('email') const comment = document.getElementById('comment') function sendText() { if (firstName.value.length > 0) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } } function sendText() { if (email.value.length > 0) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } } function sendText() { if (comment.value.length > 0) { submitBtn.disabled = false; } else { submitBtn.disabled = true; } }

 <tr> <fieldset div="contact"> <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td> <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td> <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required> </td> </fieldset> <fieldset> <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea> </tr> <lable for="hour">Which one is the best hour to contact you?</lable> <select id="hour"> <option selected>Select an Option</option> <option value="8">08:00 AM</option> <option value="9">09:00 AM</option> <ption value="10">10:00 AM</option> <option value="11">11:00 AM</option> <option value="12">12:00 AM</option> <option value="13">13:00 PM</option> <option value="14">14:00 PM</option> <option value="15">15:00 PM</option> <option value="16">16:00 PM</option> <option value="17">17:00 PM</option> <option value="18">18:00 PM</option> <option value="19">19:00 PM</option> </select> </fieldset> <button disabled id="submit">Submit</button> </h3> </nav> </div> </form>> </form>

Answer 1

Hi you will have to write some JS code for this.

$(document).ready(function() {
$('#submit').attr('disabled', true);
    if ($('#html_variable1').val() != '' && $('#html_variable2').val() != '') {
        $('#submit').attr('disabled', false);
    }
});

In your submit button add id submit, in your inputs define all ids and add them to the if statement of JS, once all inputs are different from empty the submit button will remove disable option.

Answer 2

As CBroe mention, there is pure HTML5 Validator for forms inputs:
More info here

But if You still want to make it by Yourself with JS. You can find details in the same link above.

Remember, that using a build-in solution in most cases is better than creating Your own. If You use HTML5 Validators, You will have a simple-but-efficient client-site check on all form inputs and the user will have a native callback of what they are doing wrong.

To make it work Your way, it is necessary to create some events, functions... Some work without good reason. Here is an example, based on Your (messy;) ) code:

 const submitBtn = document.getElementById('submit'); const firstName = document.getElementById('first-name'); const emailAddress = document.getElementById('email'); const comment = document.getElementById('comment'); let validation = [0, 0, 0]; function checkForm (validation) { if (validation.reduce((a, b) => a + b, 0) > 2){ submitBtn.removeAttribute('disabled'); } } firstName.addEventListener('change', (event) => { if (firstName.value.length > 0 ){ validation[0] = 1; checkForm(validation); } else { validation[0] = 0; submitBtn.setAttribute('disabled', 'disabled'); } }); emailAddress.addEventListener('change', (event) => { if (emailAddress.value.length > 0 ){ validation[1] = 1; checkForm(validation); } else { validation[1] = 0; submitBtn.setAttribute('disabled', 'disabled'); } }); comment.addEventListener('change', (event) => { if (comment.value.length > 0 ){ validation[2] = 1; checkForm(validation); } else { validation[2] = 0; submitBtn.setAttribute('disabled', 'disabled'); } });

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <fieldset id="contact"> <div><label for="first-name">First Name* </label><input type="text" id="first-name" name="first-name" placeholder="Your name" required></div> <div><label for="last-name">Last Name</label><input type="text" id="last-name" name="last-name" placeholder="Your last name"></div> <div><label for="email">Email*</label><input type="email" id="email" name="email" placeholder="Your email" required></div> </fieldset> <fieldset> <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..?" required></textarea> <label for="hour">Which one is the best hour to contact you:</label> <select id="hour"> <option disabled selected hidden>Select an Option</option> <option value="8">08:00 AM</option> <option value="9">09:00 AM</option> <option value="10">10:00 AM</option> <option value="11">11:00 AM</option> <option value="12">12:00 AM</option> <option value="13">13:00 PM</option> <option value="14">14:00 PM</option> <option value="15">15:00 PM</option> <option value="16">16:00 PM</option> <option value="17">17:00 PM</option> <option value="18">18:00 PM</option> <option value="19">19:00 PM</option> </select> </fieldset> <button disabled id="submit">Submit</button> </form> </body> </html>

Answer 3

One problem in your code ist that, you have declared a sendText function three times also you never call this function,I don't know you put all your html code in your question or not but your markup seems have some problems but since your question is realted to change the disable status of submit button, we ignore issues related to the markup. I copied your code in the below snippet and make some changes to implement the feature you wanted to have. Please checkout this snippet.

 const submitBtn = document.getElementById('submit'); const firstName = document.getElementById('first-name') const email = document.getElementById('email') const comment = document.getElementById('comment') function updateSubmitBtn(){ const firstNameValue = firstName.value.trim(); const emailValue = email.value.trim(); const commentValue = comment.value.trim(); debugger; if(firstNameValue && emailValue && commentValue){ submitBtn.removeAttribute('disabled'); }else { submitBtn.setAttribute('disabled', 'disabled'); } } firstName.addEventListener('change', updateSubmitBtn); email.addEventListener('change', updateSubmitBtn); comment.addEventListener('change', updateSubmitBtn);

 <tr> <fieldset div="contact"> <td>First Name* <input type="text" id="first-name" name="first-name" placeholder="Your name" required></td> <td>Last Name<input type="text" id="last-name" name="last-name" placeholder="Your last name"></td> <td>Email*<input type="email" id="email" name="email" placeholder="Your email" required> </td> </fieldset> <fieldset> <label for="comment">Add your comment*</label><textarea id="comment" name="comment" placeholder="Your comment..." required></textarea> </tr> <lable for="hour">Which one is the best hour to contact you?</lable> <select id="hour"> <option selected>Select an Option</option> <option value="8">08:00 AM</option> <option value="9">09:00 AM</option> <option value="10">10:00 AM</option> <option value="11">11:00 AM</option> <option value="12">12:00 AM</option> <option value="13">13:00 PM</option> <option value="14">14:00 PM</option> <option value="15">15:00 PM</option> <option value="16">16:00 PM</option> <option value="17">17:00 PM</option> <option value="18">18:00 PM</option> <option value="19">19:00 PM</option> </select> </fieldset> <button disabled id="submit">Submit</button>

please consider this, change event fires on input when the element loses focus. If you want to change the disabled status of submit button as user starts to type in input, you shoud use input event rather than change event listener.