Отключить кнопку до тех пор, пока поля не будут полностью чистыми JS

Question

Попытка оставить кнопку заблокированной до тех пор, пока поля формы не будут заполнены, и я не могу этого сделать. Я создал небольшой пример с одним полем, но принцип будет таким же, что и в более крупной форме.

Может ли кто-нибудь помочь?

Код:

function checkForm() { 
 
    var name = document.getElementById("name").value; 
 
    var cansubmit = true; 
 

 
    if (name.value.length == 0) { 
 
    cansubmit = false; 
 
    } 
 

 
    if (cansubmit == false) { 
 
    document.getElementById("submitbutton").disabled = true; 
 
    } 
 

 
};

<input type="text" id="name" onkeyup="checkForm()" /> 
 

 
<button type="button" id="myButton">Test me</button>

Answer 1

Есть несколько ошибок в вашей выборке:

1. var name присваивается значение строки элемента имени, то проверить value свойство этого - строка не имеет value.
2. id кнопки отправки - myButton, поэтому используйте этот идентификатор, чтобы получить его по идентификатору (при установке атрибута disabled).
3. Вы можете отключить submitbutton, пока длина ввода имени не превышает 0.

и отключение кнопки изначально звучит как хорошая идея, не так ли?

См исправлен пример ниже:

function checkForm() 
 
{ 
 
    var name = document.getElementById("name").value; 
 
    var cansubmit = (name.length > 0); 
 
    document.getElementById("myButton").disabled = !cansubmit; 
 

 
};

<input type="text" id="name" onkeyup="checkForm()" /> 
 

 
<button type="button" id="myButton" disabled="disabled">Test me</button>

Вы также можете захотеть рассмотреть обработку изменений с помощью отличных методов - нажатием клавиши например mouseup и т. д. Я попытался добавить onchange="checkForm()", и он работает, но только на размытие (сфокусировать) ...