javascript om in website controleren of veld in tabel leeg is

Status
Niet open voor verdere reacties.
O

Orcaa

Gebruiker
Lid geworden
1 nov 2010
Berichten
125
Heb een button die rood is gekleurd. Hieronder is een tabel met invoervelden. Als alle invoervelden ingevuld zijn moet button groen worden. Is 1 invoerveld leeg dan blijft button rood.

dit is html code voor stuk van tabel:
HTML: 
<button id = "button" onclick="showOrHide('General')" class="button1" name= "General" ><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" 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>

dit is screenshot van webform
Capture.JPG

weet iemand hoe dit in javascript of anders te doen
 
Als concept, je kan het zelf verder uitwerken :D
Code: 
<style>
.button1, .rood { background: red }
.groen { background: green }
</style>

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

<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" name="Protocol_names" 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_names" size="35"></td>
  <td></td>
  <td></td>
</tr>
</table>
</div>

<script>
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) ? "groen" : "rood";
        var btn = document.getElementById('button');
        btn.classList.remove("groen", "rood");
        btn.classList.add(color);
    });
}
</script>
In elk input veld (in div General) wordt geluisterd naar een 'keyup'.
Bij elke keyup worden alle inputs gecontroleerd in functie allInputsHaveValue.
Als alles gevuld is (maar niet alleen met spaties) dan verandert de button kleur.

Suc6. Have fun.
 
Laatst bewerkt:
Hallo Bron,

bedankt voor je oplossing. Als ik jouw oplossing stand-alone test dan werkt dit. Maar als ik dit in mijn code probeer te plaatsen dan werkt het niet.

Hieronder heb ik mijn hele code geplaatst en de button moet per div van kleur veranderen als de velden ingevuld zijn. Als in een div de checkboxen zijn aangevinkt dan veranderd de button van kleur. De overkoepelende button "GCPOD1" veranderd nog net als alle onderliggende buttons groen zijn.
Hopelijk kan je hier iets meeAlvast bedankt


HTML: 
<!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;
}
buttonC {
  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-color: #FF0000;
/}
.button1, .rood { background: red }
.groen { background: green }
.button1:hover {
  background-color: green;
}
.button2 {
  background-color: green;
}
.buttonsmall{
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:white;
}
.buttonsmall:hover {
  background-color: green;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 3px;
    width: 3px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

</style>
</head>

 <body onload="beginfase()" style="background-color:#E3CEF6;" >
  <pre><h1>              Checklist uHTS</h1></pre>
<!-- Create extra space -->
<p><br><br></p>
<script type="text/javascript">
<!--
function showOrHide(value) 
{ 
   if (document.getElementById(value).style.display == 'none') 
  { 
    document.getElementById(value).style.display = 'block'; 
  } 
  else 
  { 
    document.getElementById(value).style.display = 'none'; 
  } 
} 
<!-- Om al met hidden te starten, roepen we bij het laden van het document dit aan: <body onload="beginfase()"> -->
function beginfase()
{
  document.getElementById('General').style.display = 'none';  
  document.getElementById('Plates').style.display = 'none';  
  document.getElementById('CompoundPlates').style.display = 'none';
  document.getElementById('AssayPlates').style.display = 'none';
  document.getElementById('Cellario').style.display = 'none'; 
  document.getElementById('GCPOD1').style.display = 'none';   
  document.getElementById('System').style.display = 'none';  
  document.getElementById('Echo_O01').style.display = 'none'; 
  document.getElementById('Echo_O02').style.display = 'none';  
  document.getElementById('Echo_O03').style.display = 'none'; 
  document.getElementById('Plateloc_O01').style.display = 'none';   
  document.getElementById('Plateloc_O02').style.display = 'none';
  document.getElementById('V-Spin_O04').style.display = 'none'; 
  document.getElementById('V-Spin_O05').style.display = 'none';
  document.getElementById('Xpeel_O01').style.display = 'none';   
  document.getElementById('Xpeel_O02').style.display = 'none';   
}

// Auto-Grow-TextArea script.
function AutoGrowTextArea(textField)
{
  if (textField.clientHeight < textField.scrollHeight)
  {
    textField.style.height = textField.scrollHeight + "px";
    if (textField.clientHeight < textField.scrollHeight)
    {
      textField.style.height = 
        (textField.scrollHeight * 2 - textField.clientHeight) + "px";
    }
  }
}

//  If checkbox is checked equipment is NOT in run, then background row equipment change to grey and Color button from red to green-->
function ChangeRowColor(chkrow,row,cel) {
   var varrow = document.getElementById(row);
   var varcel = document.getElementById(cel);
   var varColor = "#E3CEF6";
   var varColor2 = "Yellow";
   if (chkrow.checked == true) {
       varColor = "Grey";
	   varColor2="Grey";
   }
   varrow.style.backgroundColor = varColor;
   varcel.style.backgroundColor = varColor2;
}
</script>
    <button  onclick="showOrHide('General')" class="button1" id="bGeneral" 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> 
  <tr>
    <td>      
    </td>
    <td>Order Id(s):</td>
    <td><input type="text" name="Order Id(s)" size="35"></td> 
	<td></td>
    <td></td>	
  </tr> 
  <tr>
    <td>      
    </td>
    <td>Experiment ID(s) :</td>
    <td><input type="text" name="Experiment ID name(s)" size="35"></td> 
	<td></td>
    <td></td>	
  </tr> 
  <tr>
    <td>
    </td>
    <td>Date Start : </td>
    <td><input type="text" name="Date Start" size="35"> </td>
	<td></td>
    <td></td>
   </tr>
   <tr>
    <td>
    </td>
    <td>Assay developer(s) :</td>
    <td><input type="text" name="Assay developer(s)" size="35"></td> 
	<td></td>
    <td></td>	
  </tr> 
  <tr>
    <td>
    </td>
    <td>Robot Operator(s) :</td>
    <td><input type="text" name="Robot Operator(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= "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 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 = "button" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('AssayPlates')">      
    </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>Plate/Tip type :</td>
    <td><input type="text" name="Plate/Tip typeAP" size="35"></td> 
	<td></td>
    <td></td>	
  </tr> 
  <tr>
    <td>
    </td>
    <td>Lid : </td>
    <td><input type="text" name="LidAP" size="35"> </td>
	<td></td>
    <td></td>
   </tr>
   <tr>
    <td>
    </td>
    <td>Storage device :</td>
    <td><input type="text" name="Storage deviceAP" size="35"></td> 
	<td></td>
    <td></td>	
  </tr> 
  <tr>
    <td>
    </td>
    <td>Position :</td>
    <td><input type="text" name="PositionAP" size="35"></td>
	<td></td>
    <td></td>    
  </tr> 
  </table>
  </div> <!-- Close div AssayPlates -->
  </div> <!-- Close div Plates -->
<!-- Create extra space -->
<p><br></p>	
<!-- The Next Button Cellario -->
<!--<button class="button-css button1" onclick="showOrHide('Cellario')" >Cellario</button> -->
<button id = "buttonC" onclick="showOrHide('Cellario')" class="button1" name= "Cellario" ><b>Cellario</b></button> 
<!-- Insert a table in a div, so this can be hide -->
<div id="Cellario">
<table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
     <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Dry run performed with exact timings : </td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>
   </tr>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Design correct:</td>
    <td></td> 
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>	
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Order correct :</td>
    <td></td> 
<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>	
  </tr> 
<tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Correct dispenser protocols in Cellario : </td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>
   </tr>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_5" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Instruments enabled :</td>
    <td></td> 
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>	
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_6" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Order analysed :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_7" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>No runs active anymore :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_8" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Not simulated :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_9" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>System readiness Dashboard ok :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
 <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_10" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>System initialized :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_11" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Start specific order :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_12" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>'Experiment present in SAMTRACK :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_13" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Is assay light sensitive? Turn lights off above Islands :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_Cellario_14" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>'Temperature uHTS lab :</td>
    <td></td>
	<td></td>
    <td><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
</table>
</div>	
<!-- Create extra space -->
<p><br></p>
<!-- The Next Button General Check POD 1 -->
<!--<button class="button-css button1" onclick="showOrHide('Cellario')" >Cellario</button> -->
<button id = "buttonPOD1" onclick="showOrHide('GCPOD1')" class="button1" name= "GCPOD1" ><b>GC_POD1</b></button> 
<!-- Insert a table in a div, so this can be hide -->
<div id="GCPOD1">
<br>	
 <div id="System_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 = "b_system1" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('System')">      
    </td>
    <td  width="40%"><b>System</></td>
    <td  width="15%"></td> 
	<td  width="15%"></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div System_button --> 
 <div id="System">
<table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td  width="10%">
      <label class="container">
        <input type="checkbox" name="cb_system1_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td  width="30%">Plate Hotel_O01 empty </td>
    <td  width="10%"></td>
	<td  width="10%"></td>
    <td  width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>
   </tr>
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_system1_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Plate Hotel_O02 empty</td>
    <td width="10%"></td> 
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>	
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_system1_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">LidStation_O05 empty</td>
    <td width="10%"></td> 
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>	
  </tr> 
<tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_system1_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Regrip Stations empty </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>
   </tr>
   </table>
   </div> <!-- Close Div System -->
   <div id="Echo_O01_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowA">
    <td  width="20%"><input type="button" id = "b_echo_01" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O01')">      
    </td>
    <td  width="40%"><b>Echo555_O01</></td>
    <td  width="15%"></td> 
	<td  id="celA" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowA" onclick="ChangeRowColor(this,'rowA','celA')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O01_button --> 
 <div id="Echo_O01">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_01_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Protocol Present</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_01_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Diagnostics both empty</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_01_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Water</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_01_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Remote driver</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O01 -->
  <!--  <p><br></p>	-->
 <div id="Echo_O02_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowB">
    <td  width="20%"><input type="button" id = "b_echo_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O02')">      
    </td>
    <td  width="40%"><b>Echo555_O02</></td>
    <td  width="15%"></td> 
	<td  id="celB" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowB" onclick="ChangeRowColor(this,'rowB','celB')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O02_button --> 
 <div id="Echo_O02">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_02_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Protocol Present</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_02_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Diagnostics both empty</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_02_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Water</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_02_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Remote driver</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O02 -->
 <div id="Echo_O03_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowC">
    <td  width="20%"><input type="button" id = "b_echo_03" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Echo_O03')">      
    </td>
    <td  width="40%"><b>Echo555_O03</></td>
    <td  width="15%"></td> 
	<td  id="celC" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowC" onclick="ChangeRowColor(this,'rowC','celC')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O03_button --> 
 <div id="Echo_O03">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_03_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Protocol Present</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_03_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Diagnostics both empty </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_03_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Water</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_echo_03_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Remote driver</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  </table>
  </div> <!-- Close Div Echo_O03 -->
 <div id="Plateloc_O01_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowD">
    <td  width="20%"><input type="button" id = "b_plateloc_01" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Plateloc_O01')">      
    </td>
    <td  width="40%"><b>Plateloc_O01</></td>
    <td  width="15%"></td> 
		<td  id="celD" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowD" onclick="ChangeRowColor(this,'rowD','celD')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Plateloc_O01_button --> 
 <div id="Plateloc_O01">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
    <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_01_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Seal</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_01_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Empty </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_01_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Temperature</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_01_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Time</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  </table>
  </div> <!-- Close Div Plateloc_O01 -->
 <div id="Plateloc_O02_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowE">
    <td  width="20%"><input type="button" id = "b_plateloc_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Plateloc_O02')">      
    </td>
    <td  width="40%"><b>Plateloc_O02</></td>
    <td  width="15%"></td> 
	<td  id="celE" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowE" onclick="ChangeRowColor(this,'rowE','celE')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Plateloc_O02_button --> 
 <div id="Plateloc_O02">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
   <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_02_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Seal</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_02_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Empty </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_02_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Temperature</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_plateloc_02_4" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Time</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  </table>
  </div> <!-- Close Div Plateloc_O02 -->
 <div id="V-Spin_O04_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowF">
    <td  width="20%"><input type="button" id = "b_vspin_04" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('V-Spin_O04')">      
    </td>
    <td  width="40%"><b>V-Spin_O04</></td>
    <td  width="15%"></td> 
	<td  id="celF" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowF" onclick="ChangeRowColor(this,'rowF','celF')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div V-Spin_O04_button --> 
 <div id="V-Spin_O04">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
   <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_vspin_04_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Bucket 1 empty</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_vspin_04_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Contra Plate nr </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_vspin_04_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Lidded</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  </table>
  </div> <!-- Close Div V-Spin_O04 -->
 <div id="V-Spin_O05_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowG">
    <td  width="20%"><input type="button" id = "b_vspin_05" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('V-Spin_O05')">      
    </td>
    <td  width="40%"><b>V-Spin_O05</></td>
    <td  width="15%"></td> 
	<td  id="celG" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowG" onclick="ChangeRowColor(this,'rowG','celG')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div V-Spin_O05_button -->
 <div id="V-Spin_O05">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_vspin_05_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Bucket 1 empty</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_vspin_05_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Contra Plate nr </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_vspin_05_3" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Lidded</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr>  
  </table>
  </div> <!-- Close Div V-Spin_O05 -->
 <div id="Xpeel_O01_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowH">
    <td  width="20%"><input type="button" id = "b_xpeel_01" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Xpeel_O01')">      
    </td>
    <td  width="40%"><b>Xpeel_O01</></td>
    <td  width="15%"></td> 
	<td  id="celH" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowH" onclick="ChangeRowColor(this,'rowH','celH')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Xpeel_O01_button -->
 <div id="Xpeel_O01">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
   <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_xpeel_01_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Tape Rol</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_xpeel_01_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Empty </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  </table>
  </div> <!-- Close Div Xpeel_O01 -->
 <div id="Xpeel_O02_button">
 <table style="width:20%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
  <tr id="rowI">
    <td  width="20%"><input type="button" id = "b_xpeel_02" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('Xpeel_O02')">      
    </td>
    <td  width="40%"><b>Xpeel_O02</></td>
    <td  width="15%"></td> 
	<td  id="celI" width="15%" bgcolor="yellow"><input type="checkbox" name="notinrun6" id="chkrowI" onclick="ChangeRowColor(this,'rowI','celI')"/></td>
    <td  width="10%"></td>	
  </tr> 
  </table>
  </div> <!-- Close Div Xpeel_O02_button -->
 <div id="Xpeel_O02">
 <table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <!--<col style="background-color:yellow"> -->
  </colgroup>
   <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_xpeel_02_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Tape Rol</td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td>    
  </tr> 
  <tr>
    <td width="10%">
      <label class="container">
        <input type="checkbox" name="cb_xpeel_02_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td width="30%">Empty </td>
    <td width="10%"></td>
	<td width="10%"></td>
    <td width="40%"><textarea name="Comment" cols="40" rows="1" onkeyup="AutoGrowTextArea(this)" ></textarea></td> 
  </tr> 
  </table>
  </div> <!-- Close Div Xpeel_O02 -->
</table>
</div>	<!-- Close Div GCPOD1 -->

<p id="demo"></p>
	
<script type="text/javascript">
function checkbox_checked(){
var chks = document.querySelectorAll('input[name^=cb_system1_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("b_system1").style.backgroundColor='green';
  else 
  document.getElementById("b_system1").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_echo_01_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("b_echo_01").style.backgroundColor='green';
  else 
  document.getElementById("b_echo_01").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_echo_02_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("b_echo_02").style.backgroundColor='green';
  else 
  document.getElementById("b_echo_02").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_echo_03_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("b_echo_03").style.backgroundColor='green';
  else 
  document.getElementById("b_echo_03").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_plateloc_01_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("b_plateloc_01").style.backgroundColor='green';
  else 
  document.getElementById("b_plateloc_01").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_plateloc_02_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("b_plateloc_02").style.backgroundColor='green';
  else 
  document.getElementById("b_plateloc_02").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_vspin_04_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked )
    document.getElementById("b_vspin_04").style.backgroundColor='green';
  else 
  document.getElementById("b_vspin_04").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_vspin_05_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked )
    document.getElementById("b_vspin_05").style.backgroundColor='green';
  else 
  document.getElementById("b_vspin_05").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_xpeel_01_]')
  if(chks[0].checked && chks[1].checked )
    document.getElementById("b_xpeel_01").style.backgroundColor='green';
  else 
  document.getElementById("b_xpeel_01").style.backgroundColor='red';
  var chks = document.querySelectorAll('input[name^=cb_xpeel_02_]')
  if(chks[0].checked && chks[1].checked )
    document.getElementById("b_xpeel_02").style.backgroundColor='green';
  else 
  document.getElementById("b_xpeel_02").style.backgroundColor='red';
  var chk = document.querySelectorAll('input[name^=cb_Cellario_]')
  if(chk[0].checked && chk[1].checked && chk[2].checked && chk[3].checked && chk[4].checked && chk[5].checked && chk[6].checked && chk[7].checked && chk[8].checked && chk[9].checked && chk[10].checked && chk[11].checked && chk[12].checked && chk[13].checked)
    buttonC.className = "button2";
  else buttonC.className = "button1";
  var chks = document.querySelectorAll('input[name^=cb_GCPOD1_]')
  if(chks[0].checked && chks[1].checked && chks[2].checked && chks[3].checked )
    document.getElementById("button").style.backgroundColor='green';
  else 
  document.getElementById("button").style.backgroundColor='red';
    }
	
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) ? "groen" : "rood";
        var btn = document.getElementById('button');
        btn.classList.remove("groen", "rood");
        btn.classList.add(color);
    });
}
	
</script>
  </body>
</html>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan