![](/img/trans.png)
[英]How to disable a button until all the input fields are filled using only JavaScript?
[英]Javascript disable button until all fields are filled
將不勝感激一些幫助解決這個問題。 需要使事件偵聽器適用於所有元素。 所以基本上當你填寫姓名,姓氏,即所有字段時,只有按鈕應該被啟用,即使其中一個字段是空的,按鈕也應該被禁用。
(function () {
"use strict";
var knapp = document.getElementById('skicka');
knapp.disabled = true;
var f=document.getElementById('fornamn');
var e=document.getElementById('efternamn');
var p=document.getElementById('passnr');
var n=document.getElementById('nat');
e.addEventListener('change',function(){
if(e.value==='' ){
knapp.disabled=true;
}
else{
knapp.disabled=false;
}
});
})();
let d = document, [inputs, knapp] = [ d.querySelectorAll('[type="text"]'), d.querySelector('#skicka')] knapp.disabled = true for (i = 0; i < inputs.length; i++) { inputs[i].addEventListener('input',() => { let values = [] inputs.forEach(v => values.push(v.value)) knapp.disabled = values.includes('') }) }
<form> <input id=fornamn type=text><br> <input id=efternamn type=text><br> <input id=passnr type=text><br> <input id=nat type=text><br> <input type=button id=skicka value=Complete> </form>
這將做到。 我更喜歡input
上的 eventhandler not change
,以便您可以在鍵入時看到按鈕被啟用。 每次在任何字段中輸入任何內容時,它都會立即獲取所有值並將它們添加到數組中。 ES6 中新增的.includes()
是一種檢查數組特定值並返回布爾值的方法。
var elements = document.querySelectorAll("#fornamn, #efternamn, #passnr, #nat");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("change", function() {
if(document.getElementById("fornamn").value == "" && document.getElementById("passnr").value == "" && document.getElementById("nat").value = "" && document.getElementById("efternamn").value == "") {
knapp.disabled=true;
} else {
knapp.disabled=false;
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.