Отключить/Включить кнопку отправки до тех пор, пока все формы не будут заполнены

Я хочу, чтобы моя кнопка отправки формы была отключена/включена в зависимости от того, полностью заполнена ли форма.

Когда входные данные заполнены, кнопка отключена. Это отлично работает. Но я бы хотел, чтобы он отключил кнопку, когда вводится ввод.

Это мой script:

<script type="text/javascript" language="javascript">
    function checkform()
    {
        var f = document.forms["theform"].elements;
        var cansubmit = true;

        for (var i = 0; i < f.length; i++) {
            if (f[i].value.length == 0) cansubmit = false;
        }

        if (cansubmit) {
            document.getElementById('submitbutton').disabled = false;
        }
    }
</script> 
<form name="theform">
<input type="text" onKeyup="checkform()" />
<input type="text" onKeyup="checkform()" />
<input id="submitbutton" type="submit" disabled="disabled" value="Submit" />
</form>

Ответы

Ответ 1

Просто используйте

document.getElementById('submitbutton').disabled = !cansubmit;

вместо условия if, которое работает только в одностороннем порядке.

Кроме того, для пользователей с отключенным JS я бы предложил установить только начальный disabled только JS. Для этого просто переместите script за <form> и вызовите checkform(); один раз.

Ответ 2

Просто добавьте else, а затем:

function checkform()
{
    var f = document.forms["theform"].elements;
    var cansubmit = true;

    for (var i = 0; i < f.length; i++) {
        if (f[i].value.length == 0) cansubmit = false;
    }

    if (cansubmit) {
        document.getElementById('submitbutton').disabled = false;
    }
    else {
        document.getElementById('submitbutton').disabled = 'disabled';
    }
}

Ответ 3

Поместите его в стол, а затем сделайте на ней:

var tabPom = document.getElementById("tabPomId");
$(tabPom ).prop('disabled', true/false);

Ответ 4

Я только что разместил это на кнопке Отключить отправку, пока поля ввода не будут заполнены. Работает для меня.

Используйте форму onsubmit. Хороший и чистый. Вам не нужно беспокоиться об изменениях и срабатывании событий нажатия клавиш. Не нужно беспокоиться о проблемах с клавиатурой и фокусом.

http://www.w3schools.com/jsref/event_form_onsubmit.asp

<form action="formpost.php" method="POST" onsubmit="return validateCreditCardForm()">
   ...
</form>

function validateCreditCardForm(){
    var result = false;
    if (($('#billing-cc-exp').val().length > 0) &&
        ($('#billing-cvv').val().length  > 0) &&
        ($('#billing-cc-number').val().length > 0)) {
            result = true;
    }
    return result;
}

Ответ 5

Вот код

<html>
   <body>
      <input type="text" name="name" id="name" required="required"                                    aria-required="true" pattern="[a-z]{1,5}" onchange="func()">
      <script>
       function func()
       {
        var namdata=document.form1.name.value;
         if(namdata.match("[a-z]{1,5}"))
        {
         document.getElementById("but1").disabled=false;
        }
        }
        </script>
  </body>
</html>

Использование Javascript