Multiple table rows should normally become an array, but each row can be a named object. Put stable field names on the editable controls and convert each row’s key-value pairs with Object.fromEntries().
Last updated: November 4, 2026.
const rows = Array.from(
document.querySelectorAll('#items tbody tr'),
(row) => Object.fromEntries(
Array.from(row.querySelectorAll('input[name], select[name]'), (field) => [
field.name,
field.type === 'checkbox' ? field.checked : field.value,
]),
),
);
console.log(JSON.stringify(rows));
// [{"description":"Cable","quantity":"2","taxable":true}]The outer array preserves row order. Each object uses the control’s name as its key, which is clearer and more stable than deriving data meaning from CSS classes.
Use attributes for their intended purpose
Use class for styling and grouping, and name for the field key sent to the server. A control may have several classes, so treating the class string as a property name creates ambiguous payloads. If the server expects identifiers, add a hidden input such as <input type="hidden" name="productId">.
MDN documents that querySelectorAll() returns a static NodeList in document order. Calling it inside each row scopes the fields correctly even when users add or remove rows before serialization.
Normalize values before sending them
Object.fromEntries() accepts key-value pairs and returns a new object. Browser input values are strings, so convert quantities with Number() only after checking that the value is present and finite. Read checkboxes from checked, not value.
Repeated names inside one row overwrite earlier properties. That is useful only when the last value intentionally wins; otherwise, model repeated values as an array. Exclude template rows and disabled controls explicitly if they are present.
Client-side conversion is convenience, not validation. The PHP endpoint must allow-list expected keys, validate types and limits, and ignore prices or permissions supplied by the browser when those values belong to the server. Continue with JavaScript arrays, form validation, and secure PHP form processing.
