loop through checkbox value to check if its checked

Question

I am working on a thing there a user can input some data, date, activity, and time. And when the user clicks on add, it adds it to a table. This table contains a 4 cell (checkbox) that is checked. Now the point is that a user can add many rows with data and then click on the checkbox, if its unchecked it will not be send to JSON string, but the rows that are checked should be send!

The problem is if i have 1 row thats green and 1 row thats red its still print out all the rows when i click on send greenmarked data.

Below is the code:

<!doctype html>
<html lang="en">
<head>
<style>
table, td {
border: 1px solid black;
padding: 0 40px 0 40px;
}

tr {
background-color: #00FF00;
}

.Green {
background-color: #00FF00;
}

.Red {
background-color: #FF0000;
}

</style>
<meta charset="utf-8">

</head>
<body>

<form>
Date: <input type="text" id="Datum" name="Date">
Activ: <input type="text" id="Activity" name="Activ">
Time: <input type="text" id="time" name="Time">
</form>

<button onclick="AddRow()">Add Data!</button>



<table id="myTable">
<tr>        
    <td>Date</td>
    <td>Activity</td>
    <td>Time</td>
    <td>Done?</td>
</tr>
</table>

<button id="buttonforsend" onclick="SendData()">Send greenmarked data!      </button> 


 <script>

 function AddRow() 
 {

  var $check = document.createElement("INPUT");
  $check.setAttribute("type", "checkbox");
  $check.setAttribute("checked", "true");
  $check.setAttribute("id", "checks");
  $check.addEventListener("click", toggleClass);

  function toggleClass() {
  console.log("clicked");

   if (this.checked == true) 
  {
  this.parentNode.parentNode.className = "Green";  

  }
  else 
{
this.parentNode.parentNode.className = "Red";
}

}

var date = document.getElementById("Datum");
var activity = document.getElementById("Activity");
var time = document.getElementById("time");

var table = document.getElementById("myTable");

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);


row.insertCell(0).innerHTML= date.value; 
row.insertCell(1).innerHTML= activity.value; 
row.insertCell(2).innerHTML= time.value;
row.insertCell(3).appendChild($check).value;

}

function addTable() {

var myTableDiv = document.getElementById("myDynamicTable");

var table = document.createElement('TABLE');
table.border='1';

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

for (var i=0; i<3; i++){
   var tr = document.createElement('TR');
   tableBody.appendChild(tr);

   for (var j=0; j<4; j++){
       var td = document.createElement('TD');
       td.width='75';
       td.appendChild(document.createTextNode("Cell " + i + "," + j));
       tr.appendChild(td);
   }
}
myTableDiv.appendChild(table);

}
function CheckData() {

var $arr = [];

var tb = document.getElementById("myTable"); 

var check = document.getElementById("checks");

for (var i = 0, row; row = tb.rows[i]; i++) {  

for (var j = 0, col; col = row.cells[j]; j++) {  

  if(check.checked == true) {
    $arr.push(col.firstChild.nodeValue);
  }

 }    
 } 
 return $arr;
 }


 function SendData() 
 {

 var obj = {test: CheckData()}; 
 var jsonString = "jsonString=" + (JSON.stringify(obj));
 var xmlhttp = new XMLHttpRequest();

 xmlhttp.open("POST","JSON_H.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-  urlencoded");
 xmlhttp.setRequestHeader("Content-Length", jsonString.length);

 xmlhttp.onreadystatechange = function() 
 {           
  if(xmlhttp.readyState === 4 && (xmlhttp.status === 200)){
      alert(xmlhttp.responseText);
  } 
  };
 xmlhttp.send(jsonString);
 }
 </script>

 </body>
 </html>

Answer 1

You can find all the checked checkboxes in the table, and then add only the values of rows with a checked checkbox

 function AddRow() { var $check = document.createElement("INPUT"); $check.setAttribute("type", "checkbox"); $check.setAttribute("checked", "true"); $check.setAttribute("class", "checks"); $check.addEventListener("click", toggleClass); function toggleClass() { if (this.checked == true) { this.parentNode.parentNode.className = "Green"; } else { this.parentNode.parentNode.className = "Red"; } } var date = document.getElementById("Datum"); var activity = document.getElementById("Activity"); var time = document.getElementById("time"); var table = document.getElementById("myTable"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); row.insertCell(0).innerHTML = date.value; row.insertCell(1).innerHTML = activity.value; row.insertCell(2).innerHTML = time.value; row.insertCell(3).appendChild($check).value; } function addTable() { var myTableDiv = document.getElementById("myDynamicTable"); var table = document.createElement('TABLE'); table.border = '1'; var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); for (var i = 0; i < 3; i++) { var tr = document.createElement('TR'); tableBody.appendChild(tr); for (var j = 0; j < 4; j++) { var td = document.createElement('TD'); td.width = '75'; td.appendChild(document.createTextNode("Cell " + i + "," + j)); tr.appendChild(td); } } myTableDiv.appendChild(table); } function CheckData() { var $arr = []; var tb = document.getElementById("myTable"); var checks = tb.querySelectorAll(".checks"), chk, tr; for (var i = 0; i < checks.length; i++) { chk = checks[i]; if (chk.checked) { tr = chk.closest ? chk.closest('tr') : chk.parentNode.parentNode; $arr.push({ date: tr.cells[0].innerText, activity: tr.cells[1].innerText }); } } return $arr; } function SendData() { var obj = { test: CheckData() }; var jsonString = "jsonString=" + (JSON.stringify(obj)); document.getElementById('jsonString').innerHTML = jsonString; return; // for testing var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "JSON_H.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); xmlhttp.setRequestHeader("Content-Length", jsonString.length); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState === 4 && (xmlhttp.status === 200)) { alert(xmlhttp.responseText); } }; xmlhttp.send(jsonString); }

 table, td { border: 1px solid black; padding: 0 40px 0 40px; } tr { background-color: #00FF00; } .Green { background-color: #00FF00; } .Red { background-color: #FF0000; }

 <form> Date: <input type="text" id="Datum" name="Date">Activ: <input type="text" id="Activity" name="Activ">Time: <input type="text" id="time" name="Time"> </form> <button onclick="AddRow()">Add Data!</button> <table id="myTable"> <tr> <td>Date</td> <td>Activity</td> <td>Time</td> <td>Done?</td> </tr> </table> <button id="buttonforsend" onclick="SendData()">Send greenmarked data!</button> <pre id="jsonString"></pre>

Since, id of an element must be unique, the id attribute of checkbox is changed to class

loop through checkbox value to check if its checked

Question

1 answers

solution1
0 ACCPTED 2015-12-16 11:35:50

loop through checkbox value to check if its checked

Question

1 answers

solution1 0 ACCPTED 2015-12-16 11:35:50

solution1
0 ACCPTED 2015-12-16 11:35:50