Disable/Enable "save-button" using JavaScript

Question

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!

you can use onChange event because it will hit the function once when you leave the input box — Harsimranjit Singh, Feb 19 '20 at 10:41
Be aware that the form can be submitted still if the button is disabled, via pressing enter on input. — gramgram, Feb 19 '20 at 10:51

score 0 · Answer 1 · answered Feb 19 '20 at 10:46

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.

score 0 · Answer 2 · answered Feb 21 '20 at 21:40

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');

    }
}

Disable/Enable "save-button" using JavaScript

2 Answers2