Activity button if data are available in all input
-
The website created a letter form. The Employer wants to make the shipment button activate if all the fields report. If one of the input data is deleted, the button is deactivated. Trying to write something similar to that found on the rubber hole, but it doesn't really want to be checked.
The solution is desirable in pure js, because jquery doesn't want to connect. And I'd like to keep the classes on every input, if that's possible, them.
html:
<input type="text" value="111" /> <input type="text" value="111" /> <input type="text" /> <button>test</button>
js:
var input = document.querySelectorAll('input[type="text"]'); var button = document.querySelector('button'); function test() { for (i=0; i<input.length; i++) { if (input[i].value == '') { button.disabled = true; } else { button.disabled = false; }; }; }; // input.onchange = test(); input.onkeyup = test();
-
var inputs = [].slice.call(document.querySelectorAll('input[type="text"]')), button = document.querySelector('button');
inputs.forEach(function(el){
el.addEventListener('input', checkInputs, false);
});
function checkInputs(){
var empty = inputs.filter(function(el){
return el.value.trim() === '';
}).length;
button.disabled = empty !== 0;
}
checkInputs();<input type="text" value="111" />
<input type="text" value="111" />
<input type="text" />
<button>test</button>