отключить кнопку отправки, когда поля ввода пустые

Question

Я хочу отключить кнопку отправки, когда 4 поля ввода равны нулю

<input type="text" name="val1" id="val1">
<input type="text" name="val2" id="val2">
<input type="text" name="val3" id="val3">
<input type="text" name="val4" id="val4">

кнопка отправки

<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />

Я использую

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('.sendButton').attr('disabled',true);

            $('#val1').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);        
                }
            })
            $('#val2').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);        
                }
            })
            $('#val3').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);        
                }
            })
            $('#val4').keyup(function(){
                if($(this).val().length !=0){
                    $('.sendButton').attr('disabled', false);
                }
                else
                {
                    $('.sendButton').attr('disabled', true);        
                }
            })
        });
        </script>

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

 $('#val1','#val2','#val3','#val4').keyup(function(){

этот код не работает.любое предложение.как использовать & и условие (val1 & val2 & val3 & val4) в этих функциях?.

Answer 1

Вы можете использовать атрибут шаблона , вам также потребуется использовать обязательный атрибут , иначе поле ввода с пустым значением будет исключено из проверки ограничения ,Это предотвратит отправку вашей формы, но не отключит вашу кнопку.

Пример:

<input pattern=".{5,}"   required title="5 character minimum">
<input pattern=".{5,10}" required title="between 5 and 10 characters">

Answer 2

$(document).ready(function(){
    $('.sendButton').attr('disabled',true);               
       $('.txtValues').keyup(function(){
       var checkNull=false;
      $('.txtValues').each(function(index,input){
        if($(this).val().length !=0)checkNull=true;
      });
      if(checkNull){
         $('.sendButton').attr('disabled', false); 
      }else{
         $('.sendButton').attr('disabled', true); 
      }
   });

});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
            
  <input type="text" name="val1" id="val1" class="txtValues">
  <input type="text" name="val2" id="val2" class="txtValues">
  <input type="text" name="val3" id="val3" class="txtValues">
  <input type="text" name="val4" id="val4" class="txtValues">    
  
<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />

Используйте общий класс CSS для всех входов.Переберите входные данные, используя $ .each, и убедитесь, что все значения равны нулю.

Answer 3

Я бы попытался решить эту проблему следующим образом:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

    $("#val1").keyup(function(event) {
        validateInputs();
    });

    $("#val2").keyup(function(event) {
        validateInputs();
    });

    $("#val3").keyup(function(event) {
        validateInputs();
    });

    $("#val4").keyup(function(event) {
        validateInputs();
    });

    function validateInputs(){
        var disableButton = false;

        var val1 = $("#val1").val();
        var val2 = $("#val2").val();
        var val3 = $("#val3").val();
        var val4 = $("#val4").val();

        if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
            disableButton = true;

        $('.sendButton').attr('disabled', disableButton);
    }
</script>

Таким образом, у вас будет единственное место для проверки вашей логики, и вам не придется поддерживать ее в количестве N мест, если вы играли в кубикидобавить больше входов позже.А также немного лучшим решением было бы дать вашим входам один и тот же класс, чтобы вы могли сделать что-то вроде

$(".myInputs").keyup(function(event){
    validateInputs();
});

Вот пример jsFiddle: https://jsfiddle.net/moj2dnup/