I have been using a form submission script that converts form inputs to JSON and submits with ajax. It has worked well for simple forms in the past, but I am encountering an issue when trying to use it for lists.
Within the form, there is a dynamic list of inputs generated by another script. The structure of the list items is as follows:
<li><input type="checkbox" name="skill_list[]" value="10155"></li>
The function responsible for reading the form is shown below:
var formToJSON = elements => [].reduce.call(elements, (data, element) => {
data[element.name] = element.value;
return data;
}, {});
When the submit button event listener is triggered, the function is called like this:
var data = formToJSON(this.elements);
Prior to submission, the data undergoes stringification:
var data = JSON.stringify(data);
An error arises within the formToJSON function. Instead of creating an object with the property name skill_list and values such as {10155, 10288, 10240}, it generates an object with the name skill_list[] where the value corresponds to the initial value in the list.
I have attempted modifying the function to handle lists without success, and I am seeking guidance on how to proceed in solving this issue.
PS. Ideally, I would like to achieve this without relying on jQuery.