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!
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.
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');
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.