Tag: html forms

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.

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

<div name="divCircuitClarifications" id="divCircuitClarifications">
  <h3>My-Sample-Circuit-A</h3>
    <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>
<P>
  <h3>My-Sample-Circuit-B</h3>
    <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>
<P>
  <h3>My-Sample-Circuit-C</h3>
    <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>
<P>
</div>

<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>
	<tbody></tbody>
</table>


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

<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();})
  		}
	});
</script>
</body>

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); 
});