Change image when filling both inputs

Question

I have two inputs and one image ... is it possible to change the image when both inputs are full?

HTML:

<div class="loginForm">
    <input class="input jmeno" type="text" name="jmeno" placeholder="jmeno" value=""><br>
    <div id="input_container"><input class="input heslo" type="text" name="heslo" placeholder="heslo" value="">
        <img src="https://www.w3.org/2005/ajar/icons/16dot-blue.gif" id="input-blue-img">
        <img src="http://www.berrylocate.com/images/dotgreen.png" id="input-green-img">
    </div>  
</div>

CSS:

#input-green-img {display:none;}

JS:

var $allInputs = $("input:text"),
$button = $("#input-blue-img");
$button2 = $("#input-green-img");
$allInputs.change(function() {
    var isEmpty = $allInputs.filter(function() {
        return ($(this).val()=="");
    });
    $button.hide();
    $button2.show();
    if(isEmpty.length == 0) {
        $button.show();
    }
});

JSfiddle: https://jsfiddle.net/qeubzwvy/1/

Answer 1

Yes try this way

first use the keyup event to instantly track changes in the input, then check if both values ​​matter and show / hide the right button:

$('input').on('keyup',function(){
    var complete = true;
    $allInputs.each(function(){
       if($(this).val() === "") complete = false;
   });

   if(complete){
       $button.hide();
       $button2.show();
   } else {
       $button.show();
       $button2.hide();
   }
});

see an example here: https://jsfiddle.net/qeubzwvy/6/

---

or in pure javascript if you prefer:

var allInputs = document.getElementsByTagName("input"),
    button1 = document.getElementById('input-blue-img'),
    button2 = document.getElementById('input-green-img');

for(i=0; i<allInputs.length; i++) {
    allInputs[i].onkeyup=function(){
    var completed = true;
    for(y=0; y<allInputs.length; y++) {
        if(allInputs[y].value.length === 0) completed = false;
    }
    if(completed){
        button1.style.display = 'none';
      button2.style.display = 'block';
    } else {
        button1.style.display = 'block';
      button2.style.display = 'none';
    }
  };
}

Fiddle