This is basically my first real venture into JS coding ... I think what I have put together here is quite long-winded and could be streamlined but I'm not quite sure how.
I have a table with Columns "Region", "Country", and "Display".
CREATE TABLE [dbo].[DATABASE](
[Region] [varchar](20) NOT NULL,
[Country] [varchar](40) NOT NULL,
[Display] [varchar](1) NULL
) ON [PRIMARY]
Here is some info from the database
EMEA Azerbaijan Y
CALA Bahamas Y
EMEA Bahrain Y
APAC Bangladesh Y
CALA Barbados Y
EMEA Belarus Y
Region is either EMEA, CALA or APAC.
Country is the name of the countries in that Region
Display is Y if its to be displayed in the list
e.g.
EMEA / France / Y
EMEA / Italy / Y
APAC / India / Y
the HTML page I would like to display is a selection of regions (countries hidden) and if a region is checked then the countries in that region are displayed with checkboxes so that they can be also selected. The overall idea is to have a list of countries you want to see information on.
You can check an "ALL regions" option and then check an "ALL countries" option to check all that region
Here's the JS:
<script>
function ChooseEMEA() {
var checkEMEA = document.getElementById("checkEMEA");
var textEMEA = document.getElementById("textEMEA");
if (checkEMEA.checked == true){
textEMEA.style.display = "block";
} else {
textEMEA.style.display = "none";
var allCB = document.querySelectorAll("input[class='CouCheckEMEA']");
var AllEMEAChecked = document.getElementById("checkAllEMEA");
for(var i=0; i< allCB.length; i++){
allCB[i].checked=false;
}
AllEMEAChecked.checked=false;
}
}
function ChooseAPAC() {
var checkAPAC = document.getElementById("checkAPAC");
var textAPAC = document.getElementById("textAPAC");
if (checkAPAC.checked == true){
textAPAC.style.display = "block";
} else {
textAPAC.style.display = "none";
var allCB = document.querySelectorAll("input[class='CouCheckAPAC']");
var AllAPACChecked = document.getElementById("checkAllAPAC");
for(var i=0; i< allCB.length; i++){
allCB[i].checked=false;
}
AllAPACChecked.checked=false;
}
}
function ChooseCALA() {
var checkCALA = document.getElementById("checkCALA");
var textCALA = document.getElementById("textCALA");
if (checkCALA.checked == true){
textCALA.style.display = "block";
} else {
textCALA.style.display = "none";
var allCB = document.querySelectorAll("input[class='CouCheckCALA']");
var AllCALAChecked = document.getElementById("checkAllCALA");
for(var i=0; i< allCB.length; i++){
allCB[i].checked=false;
}
AllCALAChecked.checked=false;
}
}
function ChooseALL() {
var checkAll = document.getElementById("checkAll");
var checkEMEA = document.getElementById("checkEMEA");
var checkAPAC = document.getElementById("checkAPAC");
var checkCALA = document.getElementById("checkCALA");
var textEMEA = document.getElementById("textEMEA");
var textAPAC = document.getElementById("textAPAC");
var textCALA = document.getElementById("textCALA");
if (checkAll.checked == true){
textEMEA.style.display = "block";
textAPAC.style.display = "block";
textCALA.style.display = "block";
checkAPAC.checked = true;
checkEMEA.checked = true;
checkCALA.checked = true;
} else {
textEMEA.style.display = "none";
textAPAC.style.display = "none";
textCALA.style.display = "none";
checkAPAC.checked = false;
checkEMEA.checked = false;
checkCALA.checked = false;
}
}
function ChooseALLEMEA() {
var allCB = document.querySelectorAll("input[class='CouCheckEMEA']");
var AllEMEAChecked = document.getElementById("checkAllEMEA");
if (AllEMEAChecked.checked == true){
for(var i=0; i< allCB.length; i++){
allCB[i].checked=true;
}
}
else{
for(var i=0; i< allCB.length; i++){
allCB[i].checked=false;
}
}
}
function ChooseALLAPAC() {
var allCB = document.querySelectorAll("input[class='CouCheckAPAC']");
var AllAPACChecked = document.getElementById("checkAllAPAC");
if (AllAPACChecked.checked == true){
for(var i=0; i< allCB.length; i++){
allCB[i].checked=true;
}
}
else{
for(var i=0; i< allCB.length; i++){
allCB[i].checked=false;
}
}
}
function ChooseALLCALA() {
var allCB = document.querySelectorAll("input[class='CouCheckCALA']");
var AllCALAChecked = document.getElementById("checkAllCALA");
if (AllCALAChecked.checked == true){
for(var i=0; i< allCB.length; i++){
allCB[i].checked=true;
}
}
else{
for(var i=0; i< allCB.length; i++){
allCB[i].checked=false;
}
}
}
</script>
Here's the HTML:
<?php
include ('./lib/db_config.php'); //DATABASE logon info and connections
$EMEAsql = "SELECT DISTINCT Country
FROM DATABASE
WHERE Region='EMEA' AND Display='Y'
ORDER BY Country ASC";
$APACsql = "SELECT DISTINCT Country
FROM DATABASE
WHERE Region='APAC' AND Display='Y'
ORDER BY Country ASC";
$CALAsql = "SELECT DISTINCT Country
FROM DATABASE
WHERE Region='CALA' AND Display='Y'
ORDER BY Country ASC";
?>
<table width="80%">
<tr><th>Select your Region</th><th colspan="3">Select your Country</th> <th></th>
</tr>
<tr>
<td width="20%" valign="Top" align="Left">
<form action="./action_page.php" method="POST">
<p>
<input type="checkbox" id="checkAll" onclick="ChooseALL()"> Region All / None<br><br>
<input type="checkbox" id="checkEMEA" class="checkEMEA" onclick="ChooseEMEA()"> EMEA<br>
<input type="checkbox" id="checkAPAC" onclick="ChooseAPAC()"> Asia Pacific<br>
<input type="checkbox" id="checkCALA" onclick="ChooseCALA()"> Canada & Latin America<br>
</p>
</td>
<td width="20%" valign="Top" align="Left">
<p id="textEMEA" style="display:none">
<input type="checkbox" id="checkAllEMEA" class="checkAllEMEA" onclick="ChooseALLEMEA()"> EMEA All / None<br><br>
<?php if (($result = sqlsrv_query($conn, $EMEAsql)) !== false)
{
while ($obj = sqlsrv_fetch_object($result))
{
$Country = ($obj->Country);
echo '<input type="checkbox" class="CouCheckEMEA" name="country[]" value="'.$Country.'" onclick="countrySelect(this.value)">'.$Country.'<br>';
}
}
?>
</p>
</td>
<td width="20%" valign="Top" align="Left">
<p id="textAPAC" style="display:none">
<input type="checkbox" id="checkAllAPAC" name="checkAllAPAC" onclick="ChooseALLAPAC()"> Asia Pacific All / None<br><br>
<?php if (($result = sqlsrv_query($conn, $APACsql)) !== false)
{
while ($obj = sqlsrv_fetch_object($result))
{
$Country = ($obj->Country);
echo '<input type="checkbox" class="CouCheckAPAC" name="country[]" value="'.$Country.'" onclick="countrySelect(this.value)">'.$Country.'<br>';
}
}
?>
</td>
<td width="20%" valign="Top" align="Left">
</p>
<p id="textCALA" style="display:none">
<input type="checkbox" id="checkAllCALA" name="checkAllCALA" onclick="ChooseALLCALA()"> Canada & Latin America All / None<br><br>
<?php if (($result = sqlsrv_query($conn, $CALAsql)) !== false)
{
while ($obj = sqlsrv_fetch_object($result))
{
$Country = ($obj->Country);
echo '<input type="checkbox" class="CouCheckCALA" name="country[]" value="'.$Country.'" onclick="countrySelect(this.value)">'.$Country.'<br>';
}
}
?>
</p>
</td>
<td width="20%" valign="Top" align="Left">
<button type="submit">Submit form</button>
</td>
</tr>
</form>
Am I over complicating my JavaScript functions?
I'm wondering if using DIV elements would be a smarter way of working this and if the JS can be consolidated in some way