I am working on a web application that allows users to update journal entries retrieved from a MySQL database. The form for editing these entries includes both static inputs (retrieved from the database) and dynamic inputs (added by the user). However, when I attempt to add a new dynamic input row and submit the form, I receive an error message indicating that an error occurred while processing the data. Specifically, the error is:
“An error occurred while processing the data. Please try again.”
The dynamic inputs do not seem to be recognized when the form is submitted, which prevents the update from being successful.
Problem Breakdown:
Static vs. Dynamic Inputs:
The static inputs (fetched from the database) work correctly.
The dynamic inputs (added using JavaScript) do not get processed correctly, leading to missing values in the $_POST array.
Expected Behavior:
When I click the “Add Row” button, a new row should be appended to the table with fields for the user to fill in (debtor, creditor, description, etc.).
Upon form submission, all values from both static and dynamic inputs should be processed correctly.
Actual Behavior:
Only the values from the static inputs are recognized in the $_POST array.
Dynamic fields return empty values or are not sent at all, resulting in the error message mentioned above.
PHP and JavaScript Code:
$account = $antiXss->xss_clean($_POST["account"]);
$debtor = $_POST["debtor"];
$creditor = $_POST["creditor"];
$description = $antiXss->xss_clean($_POST["description"]);
$acc_serial = $antiXss->xss_clean($_POST["acc_serial"]);
$has_error = false;
foreach ($account as $index => $count) {
if (isset($account[$index]) && isset($debtor[$index]) && isset($creditor[$index]) && isset($description[$index]) && isset($acc_serial[$index])) {
$s_account = htmlspecialchars(strip_tags($antiXss->xss_clean($account[$index])));
$s_debtor = filter_var($debtor[$index], FILTER_SANITIZE_NUMBER_INT);
$s_creditor = filter_var($creditor[$index], FILTER_SANITIZE_NUMBER_INT);
$s_description = htmlspecialchars(strip_tags($antiXss->xss_clean($description[$index])));
$s_acc_serial = htmlspecialchars(strip_tags($antiXss->xss_clean($acc_serial[$index])));
if (empty($s_account) || $s_debtor == "" || $s_creditor == "" || empty($s_description) || empty($s_acc_serial)) {
echo '<script> $(document).ready(function(){ toastr.error("Please fill in all fields"); }) </script>';
$has_error = true;
break;
}
if ($s_debtor == $s_creditor) {
echo '<script> $(document).ready(function(){ toastr.error("Debtor and Creditor cannot be equal in the same row"); }) </script>';
$has_error = true;
break;
}
} else {
echo '<script> $(document).ready(function(){ toastr.error("An error occurred while processing the data. Please try again."); }) </script>';
var_dump($_POST["account"], $_POST["debtor"], $_POST["creditor"], $_POST["description"], $_POST["acc_serial"]);
$has_error = true;
break;
}
}
**JavaScript for Dynamically Adding Rows:
**
$('#dynamicAddRemove').on('change', '.select_acount', function() {
$(this).closest('tr').find('.acc_serial').val($(this).val()); });
$('#dynamicAddRemove').on('change', '.select_acount', function() {
$(this).closest('tr').find('.mount').val($(this).find("option:selected").text());
});
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
var dataElement = document.getElementById('data');
var data = JSON.parse(dataElement.dataset.rows);
var product_dd = "";
product_dd += '<select class="form-control select_acount js-example-basic-single select2" name="account[]" required>';
product_dd += '<option value="">--choose account--</option>';
if (Array.isArray(data)) {
data.forEach(function(item) {
product_dd += '<option value="' + item.acc_serial + '">' + item.acc_name + '</option>';
});
} else {
console.error("Error: Invalid data format");
}
product_dd += "</select>";
var i = 0;
$("#add-btn").click(function() {
++i;
$("#dynamicAddRemove").append('<tr>'+
'<td class="td">'+product_dd+'</td>'+
'<td class="td"><input type="text" name="debtor[]" class="form-control debtor" required></td>'+
'<td class="td"><input type="text" name="creditor[]" class="form-control creditor" required></td>'+
'<td><input type="text" name="description[]" class="form-control" required></td>'+
'<td><input type="hidden" name="acc_serial[]" class="form-control acc_serial" required></td>'+
'<td><button type="button" class="btn btn-danger remove-tr"><i class="fas fa-trash"></i></button></td>'+
'</tr>');
$('.js-example-basic-single').select2();
});
HTML
<tr>
<td>
<select class="form-control select_acount js-example-basic-single select2" name="account[]" required>
<option value="<?php echo $_acc_serial_token;?>"><?php echo $_account;?></option>
</select>
</td>
<td>
<input type="text" style="max-width: 94px;" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false" name="debtor[]" value="<?php echo $_debtor;?>" class="form-control debtor" required>
</td>
<td>
<input type="text" style="max-width: 94px;" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpaste="return false" name="creditor[]" value="<?php echo $_creditor; ?>" class="form-control creditor" required>
</td>
<td>
<input type="text" name="description[]" value="<?php echo $_description; ?>" style="min-width: 205px;" class="form-control" required>
</td>
<td>
<input name="acc_serial[]" class="form-control acc_serial" type="hidden" value="<?php echo $_acc_serial_token; ?>" required>
</td>
<td>
<button type="button" name="add" class="btn btn-danger remove-tr"><i class="fas fa-trash"></i></button>
</td>
</tr>
- I used var_dump($_POST) to check the new inputs after clicking the “Add Row” button. The output showed that the dynamically added inputs weren’t passed in $_POST.
- I ensured that input names included [] (like debtor[] and creditor[]) to gather them as array fields, but the issue persists.
- I tried validating the values with JavaScript and PHP to make sure they’re correctly set when adding a new row.