完成所有输入后,检查,重置按钮是否激活

时间:2022-08-16 21:01:40

how can i make check and reset buttons active after 6 inputs were completed? I have tryed:

如何在6个输入完成后激活检查和重置按钮?我试过了:

if($('.input') == ""){  
    checkBtn.disabled = true;
    resetBtn.disabled = true;
    }
else{
    checkBtn.disabled = false;
    resetBtn.disabled = false;
}

EDIT 2 with fiddle : http://jsfiddle.net/usPMd/88/

编辑2与小提琴:http://jsfiddle.net/usPMd/88/

4 个解决方案

#1


3  

Edit : Your Jsfiddle return error 404... So I developed a basic example (it is not perfect).

编辑:你的Jsfiddle返回错误404 ...所以我开发了一个基本的例子(它并不完美)。

Jsfiddle

的jsfiddle

Javascript solution :

Javascript解决方案:

<body>

    <form>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input id="send" type="submit" disabled/>
      <input id="reset" type="reset" disabled/>
    </form>

    <script type="text/javascript">
    var checkBtn = document.getElementById("send");
    var resetBtn = document.getElementById("reset");
    var inputTag, lengthInputTag, nbCompleted;

    function forEach( a, fn ) {
        return [].forEach.call(a, fn);
    };

    function checkInput(){
        inputTag = document.getElementsByTagName("input");
        lengthInputTag = inputTag.length;
        nbCompleted = 0;
        console.log(inputTag);

        forEach(inputTag, function(el) {
           if(el.value != ""){
              nbCompleted++;
           }
        });

        if(nbCompleted < 6){
           checkBtn.disabled = true;
           resetBtn.disabled = true;
        }else{
           checkBtn.disabled = false;
           resetBtn.disabled = false;
        }  
    };
    </script>
</body>

#2


3  

   if($('.input').length == 6){  
      checkBtn.disabled = false;
      resetBtn.disabled = false;
    }else{
      checkBtn.disabled = true;
      resetBtn.disabled = true;
    }

#3


2  

So, use length then:

那么,使用长度然后:

if($('.input').length == 7){ //after 6 is 7th input 
    checkBtn.disabled = true;
    resetBtn.disabled = true;
    }

And also there might be a typo .input should be input but not 100% sure because this might also be class.

并且可能存在输入错误。输入应该输入但不是100%肯定,因为这也可能是类。

#4


2  

Ok, Here you go:

好的,你走了:

Workign demo: JSFiddle

工作演示:JSFiddle

HTML (partial):

HTML(部分):

<button id="validateButton" class="validateButton" type="button" disabled="disabled">Check</button>
<button id="resetButton" class="resetButton" type="button" disabled="disabled">Reset</button>

JS:

JS:

$(document).on('change blur', '.input', function(){
    var count = 0;
    $('.input').each(function(){
        var elem_v = $.trim ( $(this).val() );
        if (elem_v != "") {
            count++;
        }
    })
    $('button').prop('disabled', true);
    if (count===6){
        $('button').prop('disabled', false);
    }
});

#1


3  

Edit : Your Jsfiddle return error 404... So I developed a basic example (it is not perfect).

编辑:你的Jsfiddle返回错误404 ...所以我开发了一个基本的例子(它并不完美)。

Jsfiddle

的jsfiddle

Javascript solution :

Javascript解决方案:

<body>

    <form>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input type="text" onChange="checkInput()" onKeyup="checkInput()"/>
      <input id="send" type="submit" disabled/>
      <input id="reset" type="reset" disabled/>
    </form>

    <script type="text/javascript">
    var checkBtn = document.getElementById("send");
    var resetBtn = document.getElementById("reset");
    var inputTag, lengthInputTag, nbCompleted;

    function forEach( a, fn ) {
        return [].forEach.call(a, fn);
    };

    function checkInput(){
        inputTag = document.getElementsByTagName("input");
        lengthInputTag = inputTag.length;
        nbCompleted = 0;
        console.log(inputTag);

        forEach(inputTag, function(el) {
           if(el.value != ""){
              nbCompleted++;
           }
        });

        if(nbCompleted < 6){
           checkBtn.disabled = true;
           resetBtn.disabled = true;
        }else{
           checkBtn.disabled = false;
           resetBtn.disabled = false;
        }  
    };
    </script>
</body>

#2


3  

   if($('.input').length == 6){  
      checkBtn.disabled = false;
      resetBtn.disabled = false;
    }else{
      checkBtn.disabled = true;
      resetBtn.disabled = true;
    }

#3


2  

So, use length then:

那么,使用长度然后:

if($('.input').length == 7){ //after 6 is 7th input 
    checkBtn.disabled = true;
    resetBtn.disabled = true;
    }

And also there might be a typo .input should be input but not 100% sure because this might also be class.

并且可能存在输入错误。输入应该输入但不是100%肯定,因为这也可能是类。

#4


2  

Ok, Here you go:

好的,你走了:

Workign demo: JSFiddle

工作演示:JSFiddle

HTML (partial):

HTML(部分):

<button id="validateButton" class="validateButton" type="button" disabled="disabled">Check</button>
<button id="resetButton" class="resetButton" type="button" disabled="disabled">Reset</button>

JS:

JS:

$(document).on('change blur', '.input', function(){
    var count = 0;
    $('.input').each(function(){
        var elem_v = $.trim ( $(this).val() );
        if (elem_v != "") {
            count++;
        }
    })
    $('button').prop('disabled', true);
    if (count===6){
        $('button').prop('disabled', false);
    }
});