Solution 1 :

I’ve found the following post asking something similar.

They provide the following code:

(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
    });
})()

This code should keep the submit button disabled if there is at least 1 field empty.

Solution 2 :

Thanks! I figure it out without jQuery, heres my solution.

//9 Disable button in the form
const inputName = document.getElementById('title');
const inputAutor = document.getElementById('autor');
const inputIsbn = document.getElementById('isbn');
const inputNumber = document.getElementById('number');
const inputPublishing = document.getElementById('publishing');

const saveBtn = document.getElementById('save--button');

const form = document.getElementById('form');


form.addEventListener('input', showButton);

function showButton() {
    if (inputName.value.length > 0 && inputAutor.value.length > 0 &&
        inputIsbn.value.length > 0 && inputNumber.value.length > 0 &&
        inputPublishing.value.length > 0) {
        saveBtn.removeAttribute('disabled');
    } else {
        saveBtn.setAttribute('disabled', 'disabled');

    }
}

Problem :

I´ve set the attribute “disable” to my save-button and my goal is it to enable it, when the user fill out all input fields from the form.

For now it works, cause i set the onkeyup="checkForm(this)" in the last input field, but thats not a smart way to fix my problem.

Heres my html code from my form:

div class="page" id="create__book__formular">

        <div class="page__formular">

            <h3 id="formualer__name">Formular</h3>

            <label>Name:
                <input type="text" placeholder="Name" id="title" >
                </label>
            <label>Autor:
                <input type="text" placeholder="Autor" id="autor">
            </label>
            <label>ISBN:
                <input type="text" placeholder="ISBN" id="isbn">
            </label>
            <label>Anazhl:
                <input type="text" placeholder="Anazhl" id="number">
            </label>
            <label>Verlag:
                <input type="text" onkeyup="checkForm(this)" placeholder="Verlag" id="publishing">
            </label>

            <button type="button" class="btn btn-success create__book__formular" id="save--button" disabled="disabled">
                    save
            </button>
            <button type=" button " class="btn btn-light create__book__formular" id="back--button">
                back
            </button>
        </div>

    </div>

Heres my JavaScript code:

function checkForm(create__book__formular) {
var bt = document.getElementById('save--button');
if (create__book__formular.value != '') {
    bt.disabled = false;
} else {
    bt.disabled = true;
}

}

Thanks for your help!

Comments

Comment posted by Harsimranjit Singh

you can use onChange event because it will hit the function once when you leave the input box

Comment posted by gramgram

Be aware that the form can be submitted still if the button is disabled, via pressing enter on input.

By