Hi,
I have an if(){…}else{…} statement. The first part generates a table and includes an id attribute for a cell. When this function is called again the else part runs and this clears the inner.HTML of the cell which was given id in the previous part. But it isn’t clearing it.
<!DOCTYPE html>
<?php
include_once $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/func.inc.php';
include_once $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/helpers.inc.php';
include $_SERVER['DOCUMENT_ROOT'] . '/cuislegibney/includes/arraybuilder.inc.php';
?>
<html lang="en">
<head>
<!-- <script src="/cuislegibney/js/searchJavaScript.js"></script> -->
<link type="text/css" rel="stylesheet" href="/cuislegibney/css/stylesheet.css"/>
<meta charset="utf-8">
<title>Search</title>
</head>
<body>
<link rel="icon" type="image/x-icon" href="http://www.cuislegibney.com/cuislegibney/images/favicon.ico"/>
<header>
<h1>Results archive</h1>
</header>
<div class="input">
<p><a href="/cuislegibney">Return to Main Menu</a></p>
<!-- <form action="?<?php htmlout($action);?>" method="post"> -->
<form action="?" method="post">
<input type="hidden" name="action" value="search">
<input type="submit" value="<?php htmlout($button); ?>">
<fieldset>
<legend>Search</legend>
<table id="examTables">
<tr>
<td>
<table class="inner" id="searchTable">
<th>Exam Type:</th>
<?php foreach($examSearch as $searchExam): ?>
<tr><td class="left"><input type="checkbox" class="year" id="<?php htmlout($searchExam['name']); ?>" name="exams[]" value="<?php htmlout($searchExam['name']); ?>">
<?php htmlout($searchExam['name']); ?></td></tr>
<?php endforeach; ?>
</table>
</td>
<td>
<table class="inner" id="searchYear">
</table>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<script language="javascript" type="text/javascript">
var rows = 0;
var checkboxesState = {};/*all need to be set to false initially*/
<?php foreach($exams as $element): ?>
type = <?php echo json_encode($element); ?>;
checkboxesState[type] = false;
<?php endforeach; ?>
function examTables(){
var genTable;
var genRows;
var type;
var exam = this.value;
var resultArray = [];
/* id needs to be replaced with a array or object which will be record of the state of each checkbox*/
if(checkboxesState[exam] == false){
<?php foreach($exams as $element): ?>
other = <?php echo json_encode($element);?>;
if(exam == other)
{
<?php if(!empty($subs[$element])): ?>
resultArray = <?php echo json_encode($subs[$element], JSON_PRETTY_PRINT); ?>;
genTable = true;
<?php else: ?>;
genTable = false;
alert("There are no results for this exam type currently in the database.");
<?php endif; ?>;
}
<?php endforeach; ?>;
if(genTable)
{
var strOption = "";
strOption = "<table>";
var keys1 = Object.keys(resultArray);
keys1.forEach(function(item1){
var keys2 = Object.keys(resultArray[item1]);
keys2.forEach(function(items2){
var keys3 = Object.keys(resultArray[item1][items2]);
value = resultArray[item1][items2];
strOption += "<tr><td>" + value + "</td></tr>";
});
});
strOption += "</table>";
var table = document.getElementById("examTables");
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.setAttribute("id", exam);
cell.innerHTML = strOption;
row.appendChild(cell);
table.appendChild(row);
checkboxesState[exam] = true;
rows++;
}
} else if(checkboxesState[exam] == true) {
var cellA = document.getElementById(exam);
cellA.innerHTML = "";
checkboxesState[exam] = false;
}
}
var checkboxes = document.getElementsByClassName('year');
for(var index in checkboxes){
//bind event to each checkbox
checkboxes[index].onchange = examTables;
}
</script>
</body>
</html>
I am using a checkboxesState object to keep track of the state of checkboxes. When a checkbox is checked a table (first part of the if else) is created and when that checkbox is unchecked I would like that table to be cleared (second part of the if else).
It is this line that doesn’t work,
var cellA = document.getElementById(exam);
cellA.innerHTML = "";
Any help would be greatly appreciated,
Thanks
