I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but I now require modification to include the state of the checkbox. This will allow me to determine whether to add or remove the selected value from the PHP array.
Despite my efforts, I have been unable to figure out how to incorporate the checked state as an additional parameter in the AJAX post request. Without this crucial information, I am unable to dynamically update the PHP array based on user selection.
Below is the code snippet I have created so far:
$(document).ready(function() {
$("input.select-item").click(function() {
var productID = $(this).val();
// Create a reference to $(this) here:
$this = $(this);
$.post('productSelections.php', {
type: 'updateSelections',
productID: productID,
selectionType: 'single'
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating the Product Selections';
$this.closest('td').addClass("has-error");
$("#updateSelectionsErrorMessage").html(errorAlert);
$("#updateSelectionsError").show();
return; // stop executing this function any further
} else {
$this.closest('td').addClass("success")
$this.closest('td').removeClass("danger");
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating the Product Selections';
$this.closest('td').addClass("danger");
$("#updateSelectionsErrorMessage").html(ajaxError);
$("#updateSelectionsError").show();
});
});
});<table class="table table-condensed table-striped table-bordered">
<thead>
<th><input type="checkbox" class="select-all checkbox" name="select-all" /></th>
<th class="text-center" scope="col">Product ID</th>
<th class="text-center" scope="col">Description</th>
</thead>
<tbody>
<tr class="" id="85799">
<td id="AT36288"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36288" /></td>
<td>AT36288</td>
<td>Apples</td>
<td></td>
</tr>
<tr class="" id="85800">
<td id="AT36289"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36289" /></td>
<td>AT36289</td>
<td>Bananas</td>
<td></td>
</tr>
<tr class="" id="85801">
<td id="AT36290"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36290" /></td>
<td>AT36290</td>
<td>Oranges</td>
<td></td>
</tr>
<tr class="" id="85803">
<td id="AT36292"><input type="checkbox" class="select-item checkbox" name="select-item" value="AT36292" /></td>
<td>AT36292</td>
<td>Grapes</td>
<td></td>
</tr>
</tbody>
</table>