Change colour of button when input fields are filled

Question

I open a div with a table inside by clicking a button. In this table there are a number of input fields. If all input fields are filled then button should change the colour.

I have a number of divs with table with input fields. One of them is working, but does not succeed with seccond div.

<p><br></p> 

<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "Plates" ><b>Plates</b></button> 
<!-- Insert a table in a div, so this can be hide -->
 <div id="Plates">
<br>    
<div id="CompoundPlates_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="20%"><input type="button" id = "button" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('CompoundPlates')">      
    </td>
    <td width="40%"><b>CompoundPlates</></td>
    <td width="15%"></td> 
    <td width="15%"></td>
    <td width="10%"></td>   
  </tr> 
  </table>
 </div> <!-- Close Div CompoundPlates_button --> 
         <!-- Insert a table in a div, so this can be hide -->
 <div id="CompoundPlates">
   <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
   <tr>
    <td  width="10%">      
    </td>
    <td  width="20%">Number of Plates:</td>
    <td  width="30%"><input type="text" name="Number of plates" size="35"></td> 
    <td  width="20%"></td>
    <td  width="20%"></td>  
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Plate/Tip type :</td>
    <td><input type="text" name="Plate/Tip type" size="35"></td> 
    <td></td>
    <td></td>   
  </tr> 
  <tr>
    <td>
    </td>
    <td>Lid : </td>
    <td><input type="text" name="Lid" size="35"> </td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td>
    </td>
    <td>Storage device :</td>
    <td><input type="text" name="Storage device" size="35"></td> 
    <td></td>
    <td></td>   
  </tr> 
  <tr>
    <td>
    </td>
    <td>Position :</td>
    <td><input type="text" name="Position" size="35"></td>
    <td></td>
    <td></td>    
  </tr> 
 </table>
 </div> <!-- Close div CompoundPlates -->
</div> <!-- Close div Plates -->

If input boxes are filled then color of button Compound plates should change from red to green. And if button Compound plates and button Assay plates is green then overlaying button Plates should also change from red to green

Answer 1

I think it's helpful for you

[1]: Change the button's color after fill out the form

Answer 2

$("input[type=text]").change(function() {
  var filled = true;
  $( "input[type=text]" ).each(function( index ) {
  if($( this ).val() == ""){
    filled = false;
  });
  if(filled === false){
    //change color
  }
});

Should do the trick.

Answer 3

What I did is I used Jquery to check and change the color of the button and for the input fields I used css because it was hard for me to change more than one input field. This is my fiddle

 $("input[type='text'], textarea").on("input", function () { canChangeColor(); }); function canChangeColor(){ var can = true; $("input[type='text'], textarea").each(function(){ if($(this).val()==''){ can = false; } }); if(can){ $('.btn').css({background:'green'}) }else{ $('.btn').css({background:'red'}) } } 

 .form-control { background-color: red; } .form-control:valid { background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div> <input type="text" class="form-control" id="name" name="user_name" placeholder=" Full Name" required> </div> <div> <input type="text" class="form-control" name="user_mail" placeholder=" Email Address" required> </div> <div> <textarea type="text" class="form-control" name="user_message" id="message" cols="30" rows="10" placeholder=" Let me know what's on your mind" required></textarea> </div> </div> <div class="sendButton"> <button class="btn" type="submit" disabled="disabled">Send</button> </div> 

Hope this works for you!