Disable submit button if form not filled out-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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>