Tag: html

HTML Checkbox Adding and Removing Table Row

Here’s the JavaScript code I ended up using to add and remove rows from a table based on a checkbox selection (and only allowing one checkbox per group to be selected). The biggest change is that I added a name and ID to my TR for easier identification.

$(document).on("change", "input[type='checkbox']", function () {
    var $objCheckbox = $(this);
    if ($objCheckbox.is(":checked")) {			// When checked, deactivate other checkboxes and add to sets to create table
        var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";

        $(objCheckboxGroup).prop("disabled", true);
        $objCheckbox.prop("disabled", false);		// Allow checked box to be unchecked

        addSetToCreatingTable($objCheckbox.attr("setname"), $objCheckbox.attr("settype"), $objCheckbox.attr("goodcircuits") + "|" + $objCheckbox.attr("value"), $objCheckbox.attr("tableselector"));

    else {							// When unchecked, active checkboxes and remove from sets to create table
        var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
        $(objCheckboxGroup).prop("disabled", false);	

        $("#" + $objCheckbox.attr('tableselector')).each(function(){ $(this).remove();})

HTML Checkboxes To Add and Remove Values from Table

I am creating a web form where the user input sometimes cannot be resolved to a unique value. In those cases, I present the user a set of checkboxes with the options (yes, a radio button makes more sense because you can only select one. But I hate that radio buttons change selection when you hit an arrow key.).

When a selection is made, I need to (1) deactivate the checkboxes for the other options when a checkbox in the group is selected and (2) add information to a data table that is used in subsequent activities.

When a selection is cleared, I need to (1) activate the checkboxes within the group and (2) remove the right row from the data table.

Below is the HTML code that achieves this. Now I just need to map this test page into the actual web code. There’s a post with the actual code I ended up using in production too.

<head><title>Adding And Removing From Table</title></head>

<div name="divCircuitClarifications" id="divCircuitClarifications">
    <input type="checkbox" value="123" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>123</label>
    <input type="checkbox" value="234" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>234</label>
    <input type="checkbox" value="345" tableselector="SampleCircuitA" name="SampleCircuitA[]" /><label>345</label>
    <input type="checkbox" value="abc" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>abc</label>
    <input type="checkbox" value="bcd" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>bcd</label>
    <input type="checkbox" value="cde" tableselector="SampleCircuitB" name="SampleCircuitB[]" /><label>cde</label>
    <input type="checkbox" value="Cabc" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>abc</label>
    <input type="checkbox" value="Cbcd" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>bcd</label>
    <input type="checkbox" value="Ccde" tableselector="SampleCircuitC" name="SampleCircuitC[]" /><label>cde</label>

<div id="divResultTable" name="divResultTable">
<table border="1" padding="1" name="tableSetsToCreate" id="tableSetsToCreate">
	<thead><tr><th>ECCKT</th><th>Circuit ID</th></tr></thead>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	$("input:checkbox").on('click', function() {
	  	var $objCheckbox = $(this);
	  	if ($objCheckbox.is(":checked")) {			// When checked, deactivate other checkboxes and add to sets to create table
	    		var objCheckboxGroup = "input:checkbox[tableselector='" + $objCheckbox.attr("tableselector") + "']";
	    		$(objCheckboxGroup).prop("disabled", true);
	    		$objCheckbox.prop("disabled", false);		// Allow checked box to be unchecked

	                var strTableRowString = '<tr><td>' + $objCheckbox.attr("tableselector") + '</td><td>' + $objCheckbox.val() + '</td>\n';
	                $('#tableSetsToCreate tbody').append(strTableRowString);
		else {							// When unchecked, active checkboxes and remove from sets to create table
	    		var objCheckboxGroup = "input:checkbox[name='" + $objCheckbox.attr("name") + "']";
	    		$(objCheckboxGroup).prop("disabled", false);	

			$("tr:contains('" + $objCheckbox.attr('tableselector') + "')").each(function(){ $(this).remove();})

HTML – Multiple Values on Select Option

I needed to pass multiple values with a select option. It’s easily accomplished by setting the value to a JSON string

while ($row = oci_fetch_array($stmt, OCI_ASSOC+OCI_RETURN_NULLS)) {
	echo "<option value= " . json_encode($row) . ">" . $row['STRTYPENAME'] . "</option>\n";

And using JSON.parse to pull out the key of the value you need:

jQuery("#selectDivSetType").change(function () {     
    var strTemplateObject = $('#selectDivSetType').val();
    var jsonTemplateObject = JSON.parse( strTemplateObject );
    var strTemplateURI = './templates/' + jsonTemplateObject.STRTEMPLATENAME;
    $('#templateURI').attr("href", strTemplateURI); 

jQuery – Changing href When Drop-down Selection Changes

I needed to provide a different template depending on the type of activity selected in a drop-down menu. The following jQuery code gets the template name from the drop-down value and updates the href target.

jQuery("#selectDivSetType").change(function () {     
    var strTemplateName = $('#selectDivSetType').val();
    var strTemplateURI = './templates/' + strTemplateName;
    $('#templateURI').attr("href", strTemplateURI); 

Filtering HTML Drop-down

I’ve got a few drop-downs that I’ve added filtering on the drop-down – start typing and you’ll see the options that match your string. But I needed to mirror an application functionality where you select a category and are then presented with a list of options that fit the category.

Here’s the drop-down selector for the categories

    echo "      <div class=\"row\">\n";
    echo "          <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
    echo "              <div class=\"row\">\n";
    echo "                  <div class=\"row\">\n";
    echo "                      <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
    echo "                          <span><strong>Location Category:</strong></span>\n";
    echo "                      </div>\n";
    echo "                      <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
    echo "                          <select name=\"strLocCategory\" id=\"strLocCategory\" readonly/>&nbsp;\n";
    echo "                              <option class=\"NoSelection\" value=\"-----\">-----</option>\n";
    echo "                              <option class=\"Building\" value=\"201\">BUILDING</option>\n";
    echo "                              <option class=\"NonBuilding\" value=\"202\">NONBUILDING</option>\n";
    echo "                              <option class=\"Switching\" value=\"203\">SWITCHING</option>\n";
    echo "                              <option class=\"NonSwitching\" value=\"204\">NONSWITCHING</option>\n";
    echo "                              <option class=\"MiscSwitching\" value=\"205\">MISC SWITCHING</option>\n";
    echo "                              <option class=\"IntlSwitching\" value=\"206\">INTL SWITCHING</option>\n";
    echo "                              <option class=\"Switchboard\" value=\"207\">SWITCHBOARD</option>\n";
    echo "                              <option class=\"Customer\" value=\"208\">CUSTOMER</option>\n";
    echo "                              <option class=\"Room\" value=\"209\">ROOM</option>\n";
    echo "                              <option class=\"Other\" value=\"210\">OTHER</option>\n";
    echo "                          </select>\n";
    echo "                      </div>\n";
    echo "                  </div>\n";

And here’s the drop-down selector I want to filter based on category — there are a lot of options. The class for each option includes the category selectors that will include the option in the drop-down.

    echo "      <div class=\"row\">\n";
    echo "          <div class=\"col-md-12 col-sm-12 col-lg-12 col-xs-12\">\n";
    echo "              <div class=\"row\">\n";
    echo "                  <div class=\"row\">\n";
    echo "                      <div class=\"col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left\">\n";
    echo "                          <span><strong>Location Type ID:</strong></span>\n";
    echo "                      </div>\n";
    echo "                      <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-10 text-left form-group\">\n";
    echo "                          <select name=\"strLocTypeID\" id=\"strLocTypeID\" readonly/>&nbsp;\n";
    echo " <option value=\"-----\" class=\"selectors All\">-----</option>\n";
    echo " <option value=\"101\" class=\"selectors Building\">Building</option>\n";
    echo " <option value=\"1275\" class=\"selectors Building\">BUILDING</option>\n";
    echo " <option value=\"1069\" class=\"selectors Building\">CABINET</option>\n";
    echo " <option value=\"1071\" class=\"selectors Building\">CARRIER COLLO</option>\n";
    echo " <option value=\"1072\" class=\"selectors Building\">CARRIER HOTEL</option>\n";
    echo " <option value=\"1073\" class=\"selectors Building\">CARRIER PREM</option>\n";
    echo " <option value=\"1074\" class=\"selectors Building\">CELL SITE</option>\n";
    echo " <option value=\"1075\" class=\"selectors Building\">CENTRAL OFFICE</option>\n";
    echo " <option value=\"1076\" class=\"selectors Building\">CEV</option>\n";
    echo " <option value=\"1077\" class=\"selectors Building\">CUE</option>\n";
    echo " <option value=\"1078\" class=\"selectors Building\">CUSTOMER PREM</option>\n";
    echo " <option value=\"1079\" class=\"selectors Building\">COMMUNITY DIAL OFFICE</option>\n";
    echo " <option value=\"1080\" class=\"selectors Building\">Customer Site</option>\n";
    echo " <option value=\"1081\" class=\"selectors Building\">DATA CENTER</option>\n";
    echo " <option value=\"1082\" class=\"selectors Building\">DIGITAL LOOP CARRIER</option>\n";
    echo " <option value=\"1083\" class=\"selectors Building\">HUT</option>\n";
    echo " <option value=\"1084\" class=\"selectors Building\">IRU COLLO</option>\n";
    echo " <option value=\"1085\" class=\"selectors Building\">IRU HUT</option>\n";
    echo " <option value=\"1086\" class=\"selectors Building\">KDL POP</option>\n";
    echo " <option value=\"1087\" class=\"selectors Building\">METRONET</option>\n";
    echo " <option value=\"1088\" class=\"selectors Building\">MTSO</option>\n";
    echo " <option value=\"1089\" class=\"selectors Building\">MULTI-TENANT</option>\n";
    echo " <option value=\"1090\" class=\"selectors Building\">OTHER</option>\n";
    echo " <option value=\"1091\" class=\"selectors Building\">REGEN</option>\n";
    echo " <option value=\"1092\" class=\"selectors Building\">REMOTE</option>\n";
    echo " <option value=\"1093\" class=\"selectors Building\">SCHOOL</option>\n";
    echo " <option value=\"1094\" class=\"selectors Building\">SITE</option>\n";
    echo " <option value=\"1095\" class=\"selectors Building\">WIRELESS SITE</option>\n";
    echo " <option value=\"1096\" class=\"selectors Building\">WXN BUILDING</option>\n";
    echo " <option value=\"1097\" class=\"selectors Building\">WXN HUT</option>\n";
    echo " <option value=\"1098\" class=\"selectors Building\">WXN LEASED SUITE</option>\n";
    echo " <option value=\"1099\" class=\"selectors Building\">TESTING</option>\n";
    echo " <option value=\"1381\" class=\"selectors Building\">Regen</option>\n";
    echo " <option value=\"192\" class=\"selectors Customer\">End User</option>\n";
    echo " <option value=\"1276\" class=\"selectors Customer\">END USER</option>\n";
    echo " <option value=\"1100\" class=\"selectors Customer\">VENDOR/CUSTOMER LOCATION</option>\n";
    echo " <option value=\"191\" class=\"selectors Customer\">CUSTOMER LOCATION</option>\n";
    echo " <option value=\"1347\" class=\"selectors IntlSwitching\">ONE-WAY INCOMING SWITCH TO A PABX NETWRK</option>\n";
    echo " <option value=\"1348\" class=\"selectors IntlSwitching\">LOCAL TRANSIT OFFICE</option>\n";
    echo " <option value=\"1349\" class=\"selectors IntlSwitching\">COMBINED DDI AND LOCAL TRANSIT OFF</option>\n";
    echo " <option value=\"1350\" class=\"selectors IntlSwitching\">COMBINED LOCAL TRANSIT, END OFFICE</option>\n";
    echo " <option value=\"1107\" class=\"selectors IntlSwitching\">Remote Tandem and Multi-Function EO</option>\n";
    echo " <option value=\"1352\" class=\"selectors IntlSwitching\">REMOTE TANDEM AND MULTI-FUNCTION EO</option>\n";
    echo " <option value=\"1353\" class=\"selectors IntlSwitching\">INDIVIDUAL REMOTE TANDEM</option>\n";
    echo " <option value=\"1104\" class=\"selectors IntlSwitching\">Individual Remote Tandem</option>\n";
    echo " <option value=\"1351\" class=\"selectors IntlSwitching\">INCOMING SWITCH TO A PAGING NETWORK</option>\n";
    echo " <option value=\"1366\" class=\"selectors MiscSwitching\">ANNOUNCEMENT MACHINE</option>\n";
    echo " <option value=\"1306\" class=\"selectors MiscSwitching\">OTHER SWITCHING TERM ENTITIES INCL IMTS</option>\n";
    echo " <option value=\"1110\" class=\"selectors MiscSwitching\">Automatic Intercept System : FAS</option>\n";
    echo " <option value=\"1116\" class=\"selectors MiscSwitching\">Gateway-- Trunk</option>\n";
    echo " <option value=\"1117\" class=\"selectors MiscSwitching\">Gateway--Line/Access</option>\n";
    echo " <option value=\"1118\" class=\"selectors MiscSwitching\">Gateway-Access (Gnx)</option>\n";
    echo " <option value=\"1120\" class=\"selectors MiscSwitching\">Gateway-Trunk (GTx,GRx)</option>\n";
    echo " <option value=\"1123\" class=\"selectors MiscSwitching\">Message Trunk Interface</option>\n";
    echo " <option value=\"1134\" class=\"selectors MiscSwitching\">Time Distributor</option>\n";
    echo " <option value=\"1135\" class=\"selectors MiscSwitching\">Weather Distributor</option>\n";
    echo " <option value=\"1225\" class=\"selectors MiscSwitching\">Announcement machine</option>\n";
    echo " <option value=\"1232\" class=\"selectors MiscSwitching\">Overflow for X (a) X and (x) MD</option>\n";
    echo " <option value=\"1233\" class=\"selectors MiscSwitching\">Overflow for X(x)X X(x)Y (x)MD</option>\n";
    echo " <option value=\"1396\" class=\"selectors MiscSwitching\">Message Trunk Interface - (x)MD</option>\n";
    echo " <option value=\"1227\" class=\"selectors MiscSwitching\">IXC POT</option>\n";
    echo " <option value=\"1229\" class=\"selectors MiscSwitching\">MESSAGE TRUNK INTERFACE OVERFLOW</option>\n";
    echo " <option value=\"1412\" class=\"selectors MiscSwitching\">NETWORK TERMINATION INTERFACE</option>\n";
    echo " <option value=\"1413\" class=\"selectors MiscSwitching\">PACKET TANDEM SWITCH</option>\n";
    echo " <option value=\"1404\" class=\"selectors MiscSwitching\">GATEWAY - Trunk Gateway GT(x)   or GR(x)</option>\n";
    echo " <option value=\"1475\" class=\"selectors MiscSwitching\">Trunk Gateway</option>\n";
    echo " <option value=\"1477\" class=\"selectors MiscSwitching\">Line/Access Gateway</option>\n";
    echo " <option value=\"1108\" class=\"selectors MiscSwitching\">Announcement Machine</option>\n";
    echo " <option value=\"1111\" class=\"selectors MiscSwitching\">Centrex (Central Office)</option>\n";
    echo " <option value=\"1113\" class=\"selectors MiscSwitching\">DISTRIBUTORS</option>\n";
    echo " <option value=\"1114\" class=\"selectors MiscSwitching\">Emergency (911 Service)</option>\n";
    echo " <option value=\"1119\" class=\"selectors MiscSwitching\">SIGNALING GATEWAY</option>\n";
    echo " <option value=\"1124\" class=\"selectors MiscSwitching\">MESSAGE TRUNK INTERFACE</option>\n";
    echo " <option value=\"1126\" class=\"selectors MiscSwitching\">OPTICAL LINE TERMINATOR</option>\n";
    echo " <option value=\"1127\" class=\"selectors MiscSwitching\">Other Distributors</option>\n";
    echo " <option value=\"1128\" class=\"selectors MiscSwitching\">Other Switching term entities incl IMTS</option>\n";
    echo " <option value=\"1129\" class=\"selectors MiscSwitching\">Overflow Code X(x)Y</option>\n";
    echo " <option value=\"1130\" class=\"selectors MiscSwitching\">Overflow Code X(x)Z</option>\n";
    echo " <option value=\"1435\" class=\"selectors MiscSwitching\">TRUNK GATEWAY</option>\n";
    echo " <option value=\"1437\" class=\"selectors MiscSwitching\">LINE/ACCESS GATEWAY</option>\n";
    echo " <option value=\"1255\" class=\"selectors MiscSwitching\">TRUNK GATEWAY</option>\n";
    echo " <option value=\"1263\" class=\"selectors MiscSwitching\">LINE/ACCESS GATEWAY</option>\n";
    echo " <option value=\"1295\" class=\"selectors MiscSwitching\">CENTREX (CENTRAL OFFICE)</option>\n";
    echo " <option value=\"1296\" class=\"selectors MiscSwitching\">AUTOMATIC DISTRIBUTOR</option>\n";
    echo " <option value=\"1297\" class=\"selectors MiscSwitching\">TIME DISTRIBUTOR</option>\n";
    echo " <option value=\"1298\" class=\"selectors MiscSwitching\">WEATHER DISTRIBUTOR</option>\n";
    echo " <option value=\"1299\" class=\"selectors MiscSwitching\">OTHER DISTRIBUTORS</option>\n";
    echo " <option value=\"1300\" class=\"selectors MiscSwitching\">EMERGENCY (911 SERVICE)</option>\n";
    echo " <option value=\"1301\" class=\"selectors MiscSwitching\">AUTOMATIC INTERCEPT SYSTEM : FAS</option>\n";
    echo " <option value=\"1302\" class=\"selectors MiscSwitching\">COMBINED OPERATOR, TROUBLE, M/C INTERCEP</option>\n";
    echo " <option value=\"1303\" class=\"selectors MiscSwitching\">POSITION LINK FRAME</option>\n";
    echo " <option value=\"1304\" class=\"selectors MiscSwitching\">RATE AND QUOTE SYSTEM</option>\n";
    echo " <option value=\"1305\" class=\"selectors MiscSwitching\">TSPS COMMON CONTROL UNIT</option>\n";
    echo " <option value=\"1109\" class=\"selectors MiscSwitching\">Automatic Distributor</option>\n";
    echo " <option value=\"1354\" class=\"selectors NonBuilding\">BOUNDARY</option>\n";
    echo " <option value=\"1151\" class=\"selectors NonBuilding\">Repeater Housing</option>\n";
    echo " <option value=\"1356\" class=\"selectors NonBuilding\">JUNCTION</option>\n";
    echo " <option value=\"1357\" class=\"selectors NonBuilding\">MANHOLE</option>\n";
    echo " <option value=\"1358\" class=\"selectors NonBuilding\">POLE</option>\n";
    echo " <option value=\"1359\" class=\"selectors NonBuilding\">RADIO</option>\n";
    echo " <option value=\"1360\" class=\"selectors NonBuilding\">REPEATER</option>\n";
    echo " <option value=\"1361\" class=\"selectors NonBuilding\">TOLL STATION</option>\n";
    echo " <option value=\"1362\" class=\"selectors NonBuilding\">OTHER</option>\n";
    echo " <option value=\"1363\" class=\"selectors NonBuilding\">NON-BELLCORE CUSTOMER NONBUILDING LOC</option>\n";
    echo " <option value=\"1368\" class=\"selectors NonBuilding\">CABINET</option>\n";
    echo " <option value=\"1136\" class=\"selectors NonBuilding\">Boundary</option>\n";
    echo " <option value=\"1137\" class=\"selectors NonBuilding\">Cabinet</option>\n";
    echo " <option value=\"1140\" class=\"selectors NonBuilding\">End Point</option>\n";
    echo " <option value=\"1144\" class=\"selectors NonBuilding\">Junction</option>\n";
    echo " <option value=\"1145\" class=\"selectors NonBuilding\">Manhole</option>\n";
    echo " <option value=\"1149\" class=\"selectors NonBuilding\">Radio</option>\n";
    echo " <option value=\"1230\" class=\"selectors NonBuilding\">Other</option>\n";
    echo " <option value=\"1386\" class=\"selectors NonBuilding\">PEDESTAL</option>\n";
    echo " <option value=\"1138\" class=\"selectors NonBuilding\">CELL TOWER</option>\n";
    echo " <option value=\"1139\" class=\"selectors NonBuilding\">DO_NOT_USE</option>\n";
    echo " <option value=\"1141\" class=\"selectors NonBuilding\">FIBER NODE</option>\n";
    echo " <option value=\"1142\" class=\"selectors NonBuilding\">HANDHOLE</option>\n";
    echo " <option value=\"1143\" class=\"selectors NonBuilding\">Hut</option>\n";
    echo " <option value=\"1146\" class=\"selectors NonBuilding\">Non-Bellcore customer nonbuilding loc</option>\n";
    echo " <option value=\"1147\" class=\"selectors NonBuilding\">PAD</option>\n";
    echo " <option value=\"1148\" class=\"selectors NonBuilding\">Pole</option>\n";
    echo " <option value=\"1150\" class=\"selectors NonBuilding\">Repeater</option>\n";
    echo " <option value=\"1355\" class=\"selectors NonBuilding\">END POINT</option>\n";
    echo " <option value=\"1346\" class=\"selectors NonSwitching\">TEST OR SERVICE POSITION</option>\n";
    echo " <option value=\"1364\" class=\"selectors NonSwitching\">PAIR GAIN CENTRAL OFFICE TERMINAL EQMT</option>\n";
    echo " <option value=\"1367\" class=\"selectors NonSwitching\">FACILITY/CIRCUIT POI</option>\n";
    echo " <option value=\"1156\" class=\"selectors NonSwitching\">Administrative Entities</option>\n";
    echo " <option value=\"1163\" class=\"selectors NonSwitching\">Exchange Switchroom</option>\n";
    echo " <option value=\"1166\" class=\"selectors NonSwitching\">Facility/Circuit POI (Wxx)</option>\n";
    echo " <option value=\"1168\" class=\"selectors NonSwitching\">Facility/Circuit Point of Interface -POI</option>\n";
    echo " <option value=\"1169\" class=\"selectors NonSwitching\">Frames (all types)</option>\n";
    echo " <option value=\"1170\" class=\"selectors NonSwitching\">Maintenance Group</option>\n";
    echo " <option value=\"1171\" class=\"selectors NonSwitching\">Misc Non-switching Entities</option>\n";
    echo " <option value=\"1172\" class=\"selectors NonSwitching\">Miscellaneous Optical Eqmt</option>\n";
    echo " <option value=\"1179\" class=\"selectors NonSwitching\">Radio Tower collocated on building</option>\n";
    echo " <option value=\"1183\" class=\"selectors NonSwitching\">Service Center</option>\n";
    echo " <option value=\"1185\" class=\"selectors NonSwitching\">Software Cross-connectable entities</option>\n";
    echo " <option value=\"1187\" class=\"selectors NonSwitching\">Test or Service Position</option>\n";
    echo " <option value=\"1188\" class=\"selectors NonSwitching\">Toll Test Room (or Board)</option>\n";
    echo " <option value=\"1235\" class=\"selectors NonSwitching\">Misc Non-Switching Entities</option>\n";
    echo " <option value=\"1377\" class=\"selectors NonSwitching\">Session Border Controller - BS(n)</option>\n";
    echo " <option value=\"1389\" class=\"selectors NonSwitching\">Misc Optical Equip</option>\n";
    echo " <option value=\"1394\" class=\"selectors NonSwitching\">Facility/Circuit POI - W(x)(x)</option>\n";
    echo " <option value=\"1226\" class=\"selectors NonSwitching\">IC POT FOR FAC/CKT TERMINATING EQUIPMENT</option>\n";
    echo " <option value=\"1234\" class=\"selectors NonSwitching\">REMOTE LINE - RT LINE SIDE</option>\n";
    echo " <option value=\"1382\" class=\"selectors NonSwitching\">Remote Line Entity- RL(n) and RL(a)</option>\n";
    echo " <option value=\"1399\" class=\"selectors NonSwitching\">Customer Prem Equip - N(x)(x)</option>\n";
    echo " <option value=\"1400\" class=\"selectors NonSwitching\">REPEATER/REGENERATOR</option>\n";
    echo " <option value=\"1405\" class=\"selectors NonSwitching\">PROCESSOR/SERVER GROUPING</option>\n";
    echo " <option value=\"1409\" class=\"selectors NonSwitching\">Miscellaneous Optical Equip - O(n)(x)</option>\n";
    echo " <option value=\"1411\" class=\"selectors NonSwitching\">ECHO CANCELLER</option>\n";
    echo " <option value=\"1419\" class=\"selectors NonSwitching\">Processor/Server Grouping D(n)(n)</option>\n";
    echo " <option value=\"1407\" class=\"selectors NonSwitching\">H(x)(x) - ILEC Misc NonSwitching Entity</option>\n";
    echo " <option value=\"1418\" class=\"selectors NonSwitching\">Misc Optical Equip - O(x)(x)</option>\n";
    echo " <option value=\"1476\" class=\"selectors NonSwitching\">Call Agent/MSC Server</option>\n";
    echo " <option value=\"1436\" class=\"selectors NonSwitching\">CALL AGENT/MSC SERVER</option>\n";
    echo " <option value=\"1154\" class=\"selectors NonSwitching\">ACI CELL SITE</option>\n";
    echo " <option value=\"1155\" class=\"selectors NonSwitching\">ACCESS SERVICE TERMINATION</option>\n";
    echo " <option value=\"1157\" class=\"selectors NonSwitching\">BASE STATION/RADIO EQUIPMENT</option>\n";
    echo " <option value=\"1159\" class=\"selectors NonSwitching\">Concentrator</option>\n";
    echo " <option value=\"1160\" class=\"selectors NonSwitching\">Customer Premises Equipment</option>\n";
    echo " <option value=\"1162\" class=\"selectors NonSwitching\">DISTRIBUTION NODE (CABLE TV)</option>\n";
    echo " <option value=\"1173\" class=\"selectors NonSwitching\">MISCELLANEOUS OPTICAL EQUIPMENT</option>\n";
    echo " <option value=\"1174\" class=\"selectors NonSwitching\">Pair Gain Central Office Terminal Eqmt</option>\n";
    echo " <option value=\"1175\" class=\"selectors NonSwitching\">PERSONNEL SUPPORT CENTERS OAM&amp;P</option>\n";
    echo " <option value=\"1176\" class=\"selectors NonSwitching\">Processor (Applique) Grouping</option>\n";
    echo " <option value=\"1177\" class=\"selectors NonSwitching\">Processor/Server Grouping</option>\n";
    echo " <option value=\"1178\" class=\"selectors NonSwitching\">REMOTE LINE TERMINATION</option>\n";
    echo " <option value=\"1182\" class=\"selectors NonSwitching\">SONET NODE</option>\n";
    echo " <option value=\"1184\" class=\"selectors NonSwitching\">SESSION BORDER CONTROLLER/BORDER ELEMENT</option>\n";
    echo " <option value=\"1256\" class=\"selectors NonSwitching\">CALL AGENT/MSC SERVER</option>\n";
    echo " <option value=\"1284\" class=\"selectors NonSwitching\">ADMINISTRATIVE ENTITIES (SCP)</option>\n";
    echo " <option value=\"1285\" class=\"selectors NonSwitching\">PROCESSOR (APPLIQUE) GROUPING</option>\n";
    echo " <option value=\"1286\" class=\"selectors NonSwitching\">EXCHANGE SWITCHROOM</option>\n";
    echo " <option value=\"1287\" class=\"selectors NonSwitching\">FRAMES (ALL TYPES)</option>\n";
    echo " <option value=\"1288\" class=\"selectors NonSwitching\">MISC NON-SWITCHING ENTITIES</option>\n";
    echo " <option value=\"1289\" class=\"selectors NonSwitching\">SOFTWARE CROSS-CONNECTABLE ENTITIES</option>\n";
    echo " <option value=\"1290\" class=\"selectors NonSwitching\">MAINTENANCE GROUP</option>\n";
    echo " <option value=\"1291\" class=\"selectors NonSwitching\">CUSTOMER PREMISES EQUIPMENT</option>\n";
    echo " <option value=\"1292\" class=\"selectors NonSwitching\">RADIO TOWER COLOCATED ON BUILDING</option>\n";
    echo " <option value=\"1293\" class=\"selectors NonSwitching\">SERVICE CENTER</option>\n";
    echo " <option value=\"1294\" class=\"selectors NonSwitching\">TOLL TEST ROOM (OR BOARD)</option>\n";
    echo " <option value=\"1190\" class=\"selectors Other\">Acc Ckt Term in a LEC Centrex by an IC</option>\n";
    echo " <option value=\"1282\" class=\"selectors Other\">ACC CKT TERM IN A LEC CENTREX BY AN IC</option>\n";
    echo " <option value=\"1198\" class=\"selectors Other\">IXC</option>\n";
    echo " <option value=\"1200\" class=\"selectors Other\">MD Overflow</option>\n";
    echo " <option value=\"1202\" class=\"selectors Other\">Overflow for X (a) X and (x) MD</option>\n";
    echo " <option value=\"1203\" class=\"selectors Other\">Overflow for X(x)X X(x)Y (x)MD</option>\n";
    echo " <option value=\"1281\" class=\"selectors Other\">OVERFLOW FOR X(X)X X(X)Y (X)MD</option>\n";
    echo " <option value=\"1383\" class=\"selectors Other\">CONCENTRATOR</option>\n";
    echo " <option value=\"1384\" class=\"selectors Other\">BTI COLO IN LEC/IXC POP</option>\n";
    echo " <option value=\"1385\" class=\"selectors Other\">CUSTOMER COLO IN BTI POP</option>\n";
    echo " <option value=\"1191\" class=\"selectors Other\">CAGELESS COLO</option>\n";
    echo " <option value=\"1192\" class=\"selectors Other\">CUSTOMER COLO</option>\n";
    echo " <option value=\"1193\" class=\"selectors Other\">DEDICATED CPE</option>\n";
    echo " <option value=\"1194\" class=\"selectors Other\">FICTITIOUS CARRIER ETHERNET ROUTER</option>\n";
    echo " <option value=\"1196\" class=\"selectors Other\">ILEC</option>\n";
    echo " <option value=\"1197\" class=\"selectors Other\">IXC POT</option>\n";
    echo " <option value=\"1199\" class=\"selectors Other\">LEC CONSORTIUM SERVING AS A POT</option>\n";
    echo " <option value=\"1201\" class=\"selectors Other\">OCC</option>\n";
    echo " <option value=\"1204\" class=\"selectors Other\">PHYSICAL COLO</option>\n";
    echo " <option value=\"1205\" class=\"selectors Other\">POINT OF PRESENCE</option>\n";
    echo " <option value=\"1206\" class=\"selectors Other\">REGENERATOR</option>\n";
    echo " <option value=\"1207\" class=\"selectors Other\">TERMINAL</option>\n";
    echo " <option value=\"1208\" class=\"selectors Other\">VIRTUAL COLO</option>\n";
    echo " <option value=\"1278\" class=\"selectors Other\">IC POT FOR FAC/CKT TERMINATING EQUIPMENT</option>\n";
    echo " <option value=\"1279\" class=\"selectors Other\">MESSAGE TRUNK INTERFACE OVERFLOW</option>\n";
    echo " <option value=\"1280\" class=\"selectors Other\">OVERFLOW FOR X (A) X AND (X) MD</option>\n";
    echo " <option value=\"1195\" class=\"selectors Other\">IC POT for Fac/Ckt Terminating Equipment</option>\n";
    echo " <option value=\"193\" class=\"selectors Room\">Room</option>\n";
    echo " <option value=\"1277\" class=\"selectors Room\">ROOM</option>\n";
    echo " <option value=\"1210\" class=\"selectors Room\">GROOMS</option>\n";
    echo " <option value=\"1307\" class=\"selectors Switchboard\">CAMA BOARD</option>\n";
    echo " <option value=\"1023\" class=\"selectors Switchboard\">TSPS Board</option>\n";
    echo " <option value=\"1309\" class=\"selectors Switchboard\">COMBINED TOLL, DSA AND CAMA</option>\n";
    echo " <option value=\"1310\" class=\"selectors Switchboard\">DIRECTORY ASST (INFORMATION)</option>\n";
    echo " <option value=\"1311\" class=\"selectors Switchboard\">INTERCEPT BOARD</option>\n";
    echo " <option value=\"1312\" class=\"selectors Switchboard\">COMBINED DIR ASST, INTERCEPT AND COMPLET</option>\n";
    echo " <option value=\"1313\" class=\"selectors Switchboard\">INWARD TOLL BOARD</option>\n";
    echo " <option value=\"1314\" class=\"selectors Switchboard\">MANUAL SWITCHBOARD</option>\n";
    echo " <option value=\"1315\" class=\"selectors Switchboard\">OVERSEAS TOLL BOARD</option>\n";
    echo " <option value=\"1316\" class=\"selectors Switchboard\">RATE AND ROUTE DESK</option>\n";
    echo " <option value=\"1317\" class=\"selectors Switchboard\">SERVICE OBSERVING SWITCHBOARD</option>\n";
    echo " <option value=\"1318\" class=\"selectors Switchboard\">SPCL: CONF, MOBILE, MARINE SOST</option>\n";
    echo " <option value=\"1319\" class=\"selectors Switchboard\">TELECONFERENCE BOARD</option>\n";
    echo " <option value=\"1320\" class=\"selectors Switchboard\">TEL COMPANY PBX (OFFICIAL)</option>\n";
    echo " <option value=\"1321\" class=\"selectors Switchboard\">TOPS SYSTEM</option>\n";
    echo " <option value=\"1322\" class=\"selectors Switchboard\">TSPS BOARD</option>\n";
    echo " <option value=\"1323\" class=\"selectors Switchboard\">TRAFFIC SERVICE POSITION (UNIVERSAL TSP)</option>\n";
    echo " <option value=\"1324\" class=\"selectors Switchboard\">OTHER SWITCHBOARD AND DESK ENTITIES</option>\n";
    echo " <option value=\"1345\" class=\"selectors Switchboard\">TOLL BOARD (THROUGH, OUTWARD)</option>\n";
    echo " <option value=\"1022\" class=\"selectors Switchboard\">TOPS System</option>\n";
    echo " <option value=\"1308\" class=\"selectors Switchboard\">DIAL SERVICE ASSISTANCE BOARD</option>\n";
    echo " <option value=\"1030\" class=\"selectors Switching\">CALL AGENT/MSC SERVER</option>\n";
    echo " <option value=\"1033\" class=\"selectors Switching\">End Office - Crossbar</option>\n";
    echo " <option value=\"1034\" class=\"selectors Switching\">End Office - Electronic Analog</option>\n";
    echo " <option value=\"1035\" class=\"selectors Switching\">End Office - Electronic Digital</option>\n";
    echo " <option value=\"1036\" class=\"selectors Switching\">End Office - NXX Entity</option>\n";
    echo " <option value=\"1037\" class=\"selectors Switching\">End Office - Packet</option>\n";
    echo " <option value=\"1041\" class=\"selectors Switching\">PACKET FRAME RELAY SWITCH</option>\n";
    echo " <option value=\"1042\" class=\"selectors Switching\">IXC POT</option>\n";
    echo " <option value=\"1043\" class=\"selectors Switching\">MOBILE/SWITCHING (MTSO)</option>\n";
    echo " <option value=\"1046\" class=\"selectors Switching\">OPTICAL SWITCH</option>\n";
    echo " <option value=\"1047\" class=\"selectors Switching\">PACKET END OFFICE</option>\n";
    echo " <option value=\"1048\" class=\"selectors Switching\">PACKET TANDEM SWITCH</option>\n";
    echo " <option value=\"1052\" class=\"selectors Switching\">REMOTE PACKET END OFFICE</option>\n";
    echo " <option value=\"1055\" class=\"selectors Switching\">SWITCH</option>\n";
    echo " <option value=\"1068\" class=\"selectors Switching\">WIRELESS/CELLULAR</option>\n";
    echo " <option value=\"1325\" class=\"selectors Switching\">END OFFICE - CROSSBAR</option>\n";
    echo " <option value=\"1326\" class=\"selectors Switching\">END OFFICE - STEP-BY-STEP</option>\n";
    echo " <option value=\"1327\" class=\"selectors Switching\">END OFFICE - ELECTRONIC ANALOG</option>\n";
    echo " <option value=\"1328\" class=\"selectors Switching\">END OFFICE - ELECTRONIC DIGITAL</option>\n";
    echo " <option value=\"1329\" class=\"selectors Switching\">END OFFICE - REMOTE SWITCHING SYSTEMS</option>\n";
    echo " <option value=\"1330\" class=\"selectors Switching\">END OFFICE - NXX ENTITY</option>\n";
    echo " <option value=\"1331\" class=\"selectors Switching\">TANDEM OFFICE - INDIVIDUAL TANDEM</option>\n";
    echo " <option value=\"1332\" class=\"selectors Switching\">TANDEM OFFICE - TANDEM/TANDEM</option>\n";
    echo " <option value=\"1333\" class=\"selectors Switching\">TANDEM OFFICE - TANDEM/SWITCHBOARD</option>\n";
    echo " <option value=\"1334\" class=\"selectors Switching\">TANDEM OFFICE - OPR SVC TANDEM/END OFFIC</option>\n";
    echo " <option value=\"1335\" class=\"selectors Switching\">TANDEM OFFICE - ELEC TANDEM PVT NETWORK</option>\n";
    echo " <option value=\"1336\" class=\"selectors Switching\">MULTI-FUNCTION - COMBINATION SWITCH</option>\n";
    echo " <option value=\"1337\" class=\"selectors Switching\">REMOTE LINE - RT LINE SIDE</option>\n";
    echo " <option value=\"1338\" class=\"selectors Switching\">PACKET - DIGITAL PACKET DEVICE</option>\n";
    echo " <option value=\"1339\" class=\"selectors Switching\">CELL RELAY - BROADBAND</option>\n";
    echo " <option value=\"1340\" class=\"selectors Switching\">VIDEO - ANALOG/DIGITAL</option>\n";
    echo " <option value=\"1341\" class=\"selectors Switching\">CELLULAR (MTSO) - BELLBOY CONTROL TERMIN</option>\n";
    echo " <option value=\"1342\" class=\"selectors Switching\">SPECIAL SWITCHING APPLICATIONS - CCS</option>\n";
    echo " <option value=\"1343\" class=\"selectors Switching\">SPECIAL SWITCHING APPL - CONCENTRATOR</option>\n";
    echo " <option value=\"1344\" class=\"selectors Switching\">SPECIAL SWITCHING APPL - TELETYPE SWC SY</option>\n";
    echo " <option value=\"1031\" class=\"selectors Switching\">Cell Relay - Broadband</option>\n";
    echo " <option value=\"1032\" class=\"selectors Switching\">Cellular (MTSO) - Bellboy Control Termin</option>\n";
    echo " <option value=\"1039\" class=\"selectors Switching\">End Office - Remote Switching Systems</option>\n";
    echo " <option value=\"1040\" class=\"selectors Switching\">End Office - Step-by-Step</option>\n";
    echo " <option value=\"1044\" class=\"selectors Switching\">Multi-Function - Combination Switch</option>\n";
    echo " <option value=\"1049\" class=\"selectors Switching\">POI SWITCH CLLI</option>\n";
    echo " <option value=\"1050\" class=\"selectors Switching\">Packet - Digital Packet Device</option>\n";
    echo " <option value=\"1051\" class=\"selectors Switching\">Packet - Packet End Office</option>\n";
    echo " <option value=\"1053\" class=\"selectors Switching\">Remote Line - RT Line Side</option>\n";
    echo " <option value=\"1054\" class=\"selectors Switching\">Remote Switching System</option>\n";
    echo " <option value=\"1056\" class=\"selectors Switching\">Special Switching Appl - Concentrator</option>\n";
    echo " <option value=\"1057\" class=\"selectors Switching\">Special Switching Appl - Teletype Swc Sy</option>\n";
    echo " <option value=\"1058\" class=\"selectors Switching\">Special Switching Applications - CCS</option>\n";
    echo " <option value=\"1059\" class=\"selectors Switching\">Switching</option>\n";
    echo " <option value=\"1061\" class=\"selectors Switching\">Tandem Office - Elec Tandem Pvt Network</option>\n";
    echo " <option value=\"1062\" class=\"selectors Switching\">Tandem Office - Individual Tandem</option>\n";
    echo " <option value=\"1063\" class=\"selectors Switching\">Tandem Office - Opr Svc Tandem/End Offic</option>\n";
    echo " <option value=\"1065\" class=\"selectors Switching\">Tandem Office - Tandem/Switchboard</option>\n";
    echo " <option value=\"1066\" class=\"selectors Switching\">Tandem Office - Tandem/Tandem</option>\n";
    echo " <option value=\"1067\" class=\"selectors Switching\">Video - Analog/Digital</option>\n";
    echo " <option value=\"1257\" class=\"selectors Switching\">Packet End Office</option>\n";
    echo " <option value=\"1258\" class=\"selectors Switching\">Remote Packet End Office</option>\n";
    echo " <option value=\"1259\" class=\"selectors Switching\">Packet Tandem Switch</option>\n";
    echo " <option value=\"1380\" class=\"selectors Switching\">IX Carrier POT</option>\n";
    echo " <option value=\"1395\" class=\"selectors Switching\">Call Agent - CA(x)</option>\n";
    echo " <option value=\"1224\" class=\"selectors Switching\">ACC CKT TERM IN A LEC CENTREX BY AN IC</option>\n";
    echo " <option value=\"1231\" class=\"selectors Switching\">OTHER SWITCHING TERM ENTITIES INCL IMTS</option>\n";
    echo " <option value=\"1375\" class=\"selectors Switching\">IC POT FOR FAC/CKT TERMINATING EQUIPMENT</option>\n";
    echo " <option value=\"1376\" class=\"selectors Switching\">MISC NON-SWITCHING ENTITIES</option>\n";
    echo " <option value=\"1378\" class=\"selectors Switching\">TEST OR SERVICE POSITION</option>\n";
    echo " <option value=\"1391\" class=\"selectors Switching\">CALL AGENT</option>\n";
    echo " <option value=\"1406\" class=\"selectors Switching\">Digital Packet Device - (x) (x) W</option>\n";
    echo " <option value=\"1420\" class=\"selectors Switching\">Digital Packet Device (x)(x)W</option>\n";
    echo " <option value=\"1397\" class=\"selectors Switching\">ATM Switch  BB(x) [overflow B(a)(n)]</option>\n";
    echo " <option value=\"1029\" class=\"selectors Switching\">ATM SWITCH</option>\n";
    echo "                          </select>\n";
    echo "                      </div>\n";
    echo "                  </div>\n";
    echo "              </div>\n";
    echo "          </div>\n";
    echo "      </div>\n";

In the JavaScript, I’ve got a quick function that repopulates the rather long drop-down menu based on the selected category

// Filter strLocTypeID options based on strLocCategory value
$(document).ready(function () {    
    var allOptions = $('#strLocTypeID option')
    $('#strLocCategory').change(function () {
        $('#strLocTypeID option').remove()

        var classN = $('#strLocCategory option:selected').prop('class');
        var optsCat = allOptions.filter('.' + classN);
        $.each(optsCat, function (i, j) {

        var optsAll = allOptions.filter('.All');
        $.each(optsAll, function (i, j) {


Since it’s possible there are options you’d want to always appear (in my case, it’s just the “—–” to indicate no selection has been made … but there could be real items that fall into each category too), I’ve got an “All” classification that will get popped onto the top of the list.

Adding CSS To Header

I am currently working on a website that sources in a header and footer — not an uncommon thing to do as this ensures a consistent look across the site. The lead-in code starts head, closes head, starts body, and defines the common page elements (nav bar, etc). The footer then defines some more common page elements and closes body. This approach creates a problem when you want to add CSS. Now you could use style tags within the HTML, but I would rather not have the same style definition twenty times. Yeah, I’d make a single variable out of it and print the style-definition-variable twenty times … but I’d rather have my CSS sourced in from a style-sheet file.

Since I’m already using jQuery to dynamically append elements — add table rows as data is pulled back from the server — I wondered if you could append something to the header. Yes, you can!

* This function appends a CSS file to the document head
* @param {string} strFileName Path to CSS file
* @return n/a
* @example
* loadCSSStylesheetToHead('/path/to/file.css')
function loadCSSStylesheetToHead(strFileName){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("type", "text/css");
file.setAttribute("href", strFileName);

This allows me to after-the-fact add css from a style-sheet file into the document head.

Displaying An Image Tooltip

JQuery developers seem to have put a lot of effort into filtering HTML components out of tooltips … which, as someone who visits a website … is A Good Thing. But what’s a good security consideration can be a massive pain when building a website. I have a form which takes an internal ID number, and I have an image showing people how to find that internal ID number. I want a little question mark after the field name that pops up the image as a tooltip on mouseover events. And clears the image on mouseout.


// Show finding equipment ID image "tooltip" 
        	$('#FindingEID').css({ "display": "block" });
        	$('#FindingEID').css({ "display": "none" });
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 text-left">
	<span><strong>Equipment ID(s): <a id="ShowEquipmentIDTip" href="#">(?)</a></strong></span>
	<div id="FindingEID" style="position: relative;top: 20;left: 60;width: 100%;height: 100%;z-index:99;display:none"><img src="/groomsGenerateCircuitReport/images/Tip-FindingEquipmentID.png" /></div>

Moving your mouse over the ShowEquipmentIDTip a element displays the div which contains my image “tooltip” and moving the mouse away sets the display back to none.

Inspecting An Element

In Firefox’s developer tools — instead of attempting to navigate through the HTML code to find the element, just right-click on it and select “Inspect Element”

You’ll get dropped into the Inspector tab right where you need to be.

There’s also an element picker tool that you can use instead — click on it & then click on the element within the page. Same result.

HTML Opacity v/s Alpha

I am building a page that allows employees to search for public MS Teams groups — for some reason, Teams uses a ‘starts with’ search, and our staff rarely manages to find the public Teams that are out there. I wanted the list of teams and descriptions to have a visible line separation, and a table border looked bad with the enterprise color scheme. I decided to use even/odd table rows to display a slightly lighter background color. I set an opacity on the background so the actual background image is still visible.

My font colors changed! The opacity applied to the text as well.

tr:nth-child(even) {background-color: rgb(52,52,52); opacity: 0.5;}

Instead of setting an opacity on the row, I added an alpha channel to the row background color without impacting the text within table cells.

tr:nth-child(even) {background-color: rgba(52,52,52,0.5);}