Check,reset buttons active after all inputs were completed

Question

Check,reset buttons active after all inputs were completed

180 views Asked by OzZie At 08 January 2025 at 02:28

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

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

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

Original Q&A

There are 4 answers

lshettyl On 17 March 2014 at 10:46

Ok, Here you go:

Workign demo: JSFiddle

HTML (partial):

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

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);
    }
});

Bhojendra Rauniyar On 17 March 2014 at 10:18

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.

Laxmikant Ratnaparkhi On 17 March 2014 at 10:20

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

**R3tep** · Accepted Answer · 2014-03-17T10:22:07+00:00

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

Jsfiddle

Javascript solution :

<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>

TechQA.

Check,reset buttons active after all inputs were completed

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Popular Questions

Popular Tags

Trending Questions