Блог

Главная - Вопросы по программированию - Изменение цвета кнопки при заполнении полей ввода

Изменение цвета кнопки при заполнении полей ввода

#javascript #html

#javascript #HTML

Вопрос:

под кнопкой есть одна красная кнопка с несколькими полями ввода. При заполнении полей ввода. Цвет кнопки должен измениться на зеленый. ниже находится вторая красная кнопка. под этой второй красной кнопкой находятся две маленькие красные кнопки. под маленькой красной кнопкой находятся два поля ввода. Когда поля ввода заполнены, маленькие красные кнопки должны смениться на зеленые. И когда обе маленькие кнопки зеленые, большая кнопка также должна измениться на зеленый.

Попытался создать java-скрипт, чтобы проверить, заполнены ли поля ввода

 <!DOCTYPE html>
<html>
<head>
 <title>Checklist uHTS Webversion</title>
<style>
table, th, td {
    border: 1px solid black;
}
button {
  height:40px;
  width:160px;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 12px 15px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button1 { background: red }

.button1:hover {
  background-color: green;
}
.buttonsmall{
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:white;
}
.buttonsmall:hover {
  background-color: green;
}
</style>
</head>
 <body onload="beginfase()" style="background-color:#E3CEF6;" >
  <p><br><br></p>

<button id = "button" onclick="showOrHide('General')" class="button1" name= "bGeneral" ><b>General</b></button> 

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
      <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">        
        </colgroup>
   <tr>
    <td width="10%">      
    </td>
    <td width="20%">Protocol name(s) : </td>
    <td width="30%"><input type="text" id="Protname" name="Protocol name(s)" size="35"> </td>
    <td width="20%"></td>
    <td width="20%"></td>
   </tr>
   <tr>
    <td>      
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr>
    </table>
 </div>
<!-- Create extra space -->
<p><br></p> 

<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "buttonP" ><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 = "buttonCP"  name="buttonCP" class="buttonsmall" style="height:20px;width:60px" >      
    </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>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr>
   </table>
 </div> <!-- Close div CompoundPlates -->
<div id="AssayPlates_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 = "buttonAP" name="buttonAP" class="buttonsmall" style="height:20px;width:60px" >      
    </td>
    <td width="40%"><b>AssayPlates</></td>
    <td width="15%"></td> 
    <td width="15%"></td>
    <td width="10%"></td>   
  </tr> 
    </table>
  </div> <!-- Close Div AssayPlates_button -->   
<div id="AssayPlates">
     <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 platesAP" size="35"></td> 
    <td width="20%"></td>
    <td width="20%"></td>   
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td> 
    <td></td>
    <td></td>   
  </tr>
  </table>
  </div> <!-- Close div AssayPlates -->
  </div> <!-- Close div Plates -->
<!-- Create extra space -->
<p><br></p> 

<script type="text/javascript">

function allInputsHaveValue (genInputs) {
    for (var i = 0; i < genInputs.length; i  ) {
        if (genInputs[i].value.trim() == '') return false;
    }
    return true;
}
var genInputs = document.querySelectorAll('#General input[type="text"]');
for (var i = 0; i < genInputs.length; i  ) {
    genInputs[i].addEventListener("keyup", function(e) {
        var color = (allInputsHaveValue(genInputs) == true) ? "green" : "red";
        var btn = document.getElementById('button');
        btn.classList.remove("green", "red");
        btn.classList.add(color);
    });
}
</script>
  </body>
</html>

ожидайте изменения цвета кнопки при заполнении полей ввода

Ответ №1:

Я обновляю ваш код с помощью некоторых дополнительных css / javascript

 <!DOCTYPE html>
<html>

<head>
    <title>Checklist uHTS Webversion</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        button {
            height: 40px;
            width: 160px;
            border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color: red;
            color: yellow;
            padding: 12px 15px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
        /* ADDED CSS */
        button.green,
        input.green {
            background: green;
        }
        /* ADDED CSS -- end*/

        .button1 {
            background: red
        }

        .button1:hover {
            background-color: green;
        }

        .buttonsmall {
            background-color: #FF0000;
            border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color: white;
        }

        .buttonsmall:hover {
            background-color: green;
        }
    </style>
</head>

<body onload="beginfase()" style="background-color:#E3CEF6;">
    <p><br><br></p>

    <button id="button" onclick="showOrHide('General')" class="button1" name="bGeneral"><b>General</b></button>

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
        <table style="width:50%;margin-left:50px;">
            <colgroup>
                <col span="3" style="background-color:#E3CEF6;">
            </colgroup>
            <tr>
                <td width="10%">
                </td>
                <td width="20%">Protocol name(s) : </td>
                <td width="30%"><input type="text" id="Protname" name="Protocol name(s)" size="35"> </td>
                <td width="20%"></td>
                <td width="20%"></td>
            </tr>
            <tr>
                <td>
                </td>
                <td>Order name(s):</td>
                <td><input type="text" name="Order name(s)" size="35"></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <!-- Create extra space -->
    <p><br></p>

    <!-- The Next Button Plates -->
    <button id="buttonP" onclick="showOrHide('Plates')" class="button1" name="buttonP"><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="buttonCP" name="buttonCP" class="buttonsmall"
                            style="height:20px;width:60px">
                    </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>Order name(s):</td>
                    <td><input type="text" name="Order name(s)" size="35"></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div> <!-- Close div CompoundPlates -->
        <div id="AssayPlates_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="buttonAP" name="buttonAP" class="buttonsmall"
                            style="height:20px;width:60px">
                    </td>
                    <td width="40%"><b>AssayPlates</>
                    </td>
                    <td width="15%"></td>
                    <td width="15%"></td>
                    <td width="10%"></td>
                </tr>
            </table>
        </div> <!-- Close Div AssayPlates_button -->
        <div id="AssayPlates">
            <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 platesAP" size="35"></td>
                    <td width="20%"></td>
                    <td width="20%"></td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>Order name(s):</td>
                    <td><input type="text" name="Order name(s)" size="35"></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div> <!-- Close div AssayPlates -->
    </div> <!-- Close div Plates -->
    <!-- Create extra space -->
    <p><br></p>

    <script type="text/javascript">

        function allInputsHaveValue(genInputs) {
            for (var i = 0; i < genInputs.length; i  ) {
                if (genInputs[i].value.trim() == '') return false;
            }
            return true;
        }

        var genInputs = document.querySelectorAll('#General input[type="text"]');
        for (var i = 0; i < genInputs.length; i  ) {
            genInputs[i].addEventListener("keyup", function (e) {
                var color = (allInputsHaveValue(genInputs) == true) ? "green" : "red";

                var btn = document.getElementById('button');
                btn.classList.remove("green", "red");
                btn.classList.add(color);
            });
        }



        /* ADDED JAVASCRIPT */
        function check_CompoundAndAssyButtons() {
            var btnCP = document.getElementById('buttonCP');
            var btnAP = document.getElementById('buttonAP');

            var color = ((btnCP.classList.contains('green')) amp;amp; (btnAP.classList.contains('green'))) ? "green" : "red";

            var btn = document.getElementById('buttonP');
            btn.classList.remove("green", "red");
            btn.classList.add(color);
        }

        var CompoundPlatesInputs = document.querySelectorAll('#CompoundPlates input[type="text"]');
        for (var i = 0; i < CompoundPlatesInputs.length; i  ) {
            CompoundPlatesInputs[i].addEventListener("keyup", function (e) {
                var color = (allInputsHaveValue(CompoundPlatesInputs) == true) ? "green" : "red";
                var btn = document.getElementById('buttonCP');
                btn.classList.remove("green", "red");
                btn.classList.add(color);

                check_CompoundAndAssyButtons();
            });
        }

        var assyPlatesInput = document.querySelectorAll('#AssayPlates input[type="text"]');
        for (var i = 0; i < assyPlatesInput.length; i  ) {
            assyPlatesInput[i].addEventListener("keyup", function (e) {
                var color = (allInputsHaveValue(assyPlatesInput) == true) ? "green" : "red";
                var btn = document.getElementById('buttonAP');
                btn.classList.remove("green", "red");
                btn.classList.add(color);

                check_CompoundAndAssyButtons();
            });
        }
        /* ADDED JAVASCRIPT -- end */
        // JSFIDDLE
        // https://jsfiddle.net/tk6430p7/5/
    </script>
</body>

</html>

Комментарии:

1. вау, это именно то, что я пробовал. Большое спасибо. Теперь я могу продолжить с остальными

Ответ №2:

Вы можете применить это. используя это, вы можете увидеть, как мы можем изменить цвет кнопки при заполнении полей ввода. используйте #idForm:valid .button для кнопки, если поля заполнены

         .wrapper {
        display: flex;
        flex-flow: row wrap;
        text-align: center;
        background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
         font-family: Arial;
     }

     #idForm:valid .button {
      background : yellow;
     }

    <div class="wrapper">
        <main class="main">
            <h2>Form</h2>
            <form id="idForm" method="GET" action="action.html">
                <label for="uName"><b>uName:</b></label>
                <input id="uName" type="text" placeholder="uName" required/><br/>
                <label for="pswrd"><b>pswrd:</b></label>
                <input id="pswrd" type="pswrd" placeholder="pswrd" required/><br/>
                <input class="button" type="submit" value="Form"/><br/>
            </form>
        </main>
       </div>

Ответ №3:

Вы можете использовать jQuery, чтобы получить значение элементов по их идентификатору и проверить, пусты ли они. Кроме того, поместите проверку в метод, который вызывается с помощью метода onkeyup, чтобы каждый раз, когда вносятся изменения в любой из входных данных, выполнялась проверка. В этом примере, когда вы заполняете все поля, кнопка Таблички становится зеленой. Если вы очистите одно, оно снова станет красным.

     <!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"> </script>
  <title>Checklist uHTS Webversion</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }

    button {
      height: 40px;
      width: 160px;
      border: 4px;
      border-radius: 20px 20px 20px 20px;
      border-color: red;
      color: yellow;
      padding: 12px 15px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }

    .button1 {
      background: red
    }

    .button1:hover {
      background-color: green;
    }

    .buttonsmall {
      background-color: #FF0000;
      border: 4px;
      border-radius: 20px 20px 20px 20px;
      border-color: white;
    }

    .buttonsmall:hover {
      background-color: green;
    }
  </style>
</head>

<body style="background-color:#E3CEF6;">
  <p><br><br></p>

  <button id="button" onclick="showOrHide('General')" class="button1" name="bGeneral"><b>General</b></button>

  <!-- Insert a table in a div, so this can be hide -->
  <div id="General">
    <table style="width:50%;margin-left:50px;">
      <colgroup>
        <col span="3" style="background-color:#E3CEF6;">
      </colgroup>
      <tr>
        <td width="10%">
        </td>
        <td width="20%">Protocol name(s) : </td>
        <td width="30%"><input type="text" id="Protname" name="Protocol name(s)" size="35" onkeyup="changeColor()">
        </td>
        <td width="20%"></td>
        <td width="20%"></td>
      </tr>
      <tr>
        <td>
        </td>
        <td>Order name(s):</td>
        <td><input type="text" id="Order" name="Order name(s)" size="35" onkeyup="changeColor()"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <!-- Create extra space -->
  <p><br></p>

  <!-- The Next Button Plates -->
  <button id="buttonP" onclick="showOrHide('Plates')" class="button1" name="buttonP"><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="buttonCP" name="buttonCP" class="buttonsmall"
              style="height:20px;width:60px">
          </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" id="Number1" name="Number of plates" size="35" onkeyup="changeColor()">
          </td>
          <td width="20%"></td>
          <td width="20%"></td>
        </tr>
        <tr>
          <td>
          </td>
          <td>Order name(s):</td>
          <td><input type="text" id="Order1" name="Order name(s)" size="35" onkeyup="changeColor()"></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div> <!-- Close div CompoundPlates -->
    <div id="AssayPlates_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="buttonAP" name="buttonAP" class="buttonsmall"
              style="height:20px;width:60px">
          </td>
          <td width="40%"><b>AssayPlates</>
          </td>
          <td width="15%"></td>
          <td width="15%"></td>
          <td width="10%"></td>
        </tr>
      </table>
    </div> <!-- Close Div AssayPlates_button -->
    <div id="AssayPlates">
      <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" id="Number2" name="Number of platesAP" size="35" onkeyup="changeColor()">
          </td>
          <td width="20%"></td>
          <td width="20%"></td>
        </tr>
        <tr>
          <td>
          </td>
          <td>Order name(s):</td>
          <td><input type="text" id="Order2" name="Order name(s)" size="35" onkeyup="changeColor()"></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div> <!-- Close div AssayPlates -->
  </div> <!-- Close div Plates -->
  <!-- Create extra space -->
  <p><br></p>

  <script type="text/javascript">
    function changeColor() {
        var miElemento = $('#Protname').val();
        var miElemento2 = $('#Order').val();
        var miElemento3 = $('#Number1').val();
        var miElemento4 = $('#Order1').val();
        var miElemento5 = $('#Number2').val();
        var miElemento6 = $('#Order2').val();
        if (miElemento !== "" amp;amp; miElemento2 !== "" amp;amp; miElemento3 !== "" amp;amp; miElemento4 !== "" amp;amp; miElemento5 !==
          "" amp;amp; miElemento6 !== "") {
          $("#buttonP").css("background-color", "green");
        } else {
          $("#buttonP").css("background-color", "red");
        }
      }
  </script>
</body>

</html>