Изменить цвет кнопки, когда поля ввода заполнены - PullRequest
Новая
       6

Изменить цвет кнопки, когда поля ввода заполнены

0 голосов
/ 23 апреля 2019

Я открываю div с таблицей внутри, нажимая кнопку.В этой таблице есть несколько полей ввода.Если все поля ввода заполнены, то кнопка должна изменить цвет.

У меня есть ряд 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 -->

Если поля ввода заполнены, то цвет кнопки «Составные пластины» должен измениться с красного на зеленый.И если кнопка «Составные пластины» и кнопка «Аналитические пластины» имеет зеленый цвет, то накладывающаяся кнопка «Пластины» также должна изменить цвет с красного на зеленый

Ответы [ 3 ]

0 голосов
/ 23 апреля 2019 
$("input[type=text]").change(function() {
  var filled = true;
  $( "input[type=text]" ).each(function( index ) {
  if($( this ).val() == ""){
    filled = false;
  });
  if(filled === false){
    //change color
  }
});

Должен сделать свое дело.

0 голосов
/ 23 апреля 2019

Я использовал Jquery для проверки и изменения цвета кнопки, а для полей ввода я использовал css, потому что мне было трудно изменить более одного поля ввода. Это моя скрипка 

$("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>

Надеюсь, это работает для вас!

0 голосов
/ 23 апреля 2019

Я думаю, что это полезно для вас

[1]: Изменить цвет кнопки после заполнения формы

...