Question

我通过单击一个按钮在表中打开一个div。在此表中，有许多输入字段。如果所有输入字段均已填写，则按钮应更改颜色。

我有许多带有输入字段的表格的div。其中之一正在工作，但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 -->

如果输入框已填充，则按钮复合板的颜色应从红色变为绿色。如果“复合”按钮板和“检测板”按钮为绿色，则重叠的“按钮板”也应从红色更改为绿色

Answer 1

我认为这对您有帮助

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

应该做到这一点。

Answer 3

我所做的是我使用Jquery检查并更改了按钮的颜色，对于输入字段，我使用了CSS，因为我很难更改多个输入字段。这是我的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>

希望这对您有用！

填写输入字段时更改按钮的颜色

3 个答案: