如何使用Javascript在输入字段的名称属性中动态设置数组的索引

Question

How to Dynamically set the index of array in the name attribute of the input field using javascript?

<input type="text" name="item[][name]">
<input type="text" name="item[][description]">
<input type="text" name="item[][brand]">

If I add thesame set of input fields or duplicate it using javascript the result should be like below:

<input type="text" name="item[0][name]">
<input type="text" name="item[0][description]">
<input type="text" name="item[0][brand]">

<input type="text" name="item[1][name]">
<input type="text" name="item[1][description]">
<input type="text" name="item[1][brand]">

Answer 1

Possibly you do a wrong thing. If you create this fields with js put index there.

Example with plain js.

var maxInputNum = 5;

var inputName = document.createElement('input'),
    inputDescription = document.createElement('input'),
    inputBrand = document.createElement('input');

maxInputNum++;
inputName.name = 'item[' + maxInputNum + '][name]';
inputDescription.name = 'item[' + maxInputNum + '][description]';
inputBrand.name = 'item[' + maxInputNum + '][brand]';

form.appendChild(inputName);
form.appendChild(inputDescription);
form.appendChild(inputBrand);

Of course you could use jQuery to simplify example.

var maxInputNum = 5;

maxInputNum++;
var $inputName = $('<input type="text" name="item[' + maxInputNum + '][name]">'),
    $inputDescription = $('<input type="text" name="item[' + maxInputNum + '][brand]">'),
    $inputBrand = $('<input type="text" name="item[' + maxInputNum + '][description]">');

$('#form').append($inputName);
$('#form').append($inputDescription);
$('#form').append($inputBrand);

But better solution is using something like angularjs.

Answer 2

Here you can update all name attribute that container "[digits]" with its order in the selected array of HTMLElements. you can create a function called update order and call it every time something happened and affect order ... Sort Order in Sortable Elements or Delete Element of the array.

       $("input").each(function (indexitem, itemdata) {
            var name = $(itemdata).attr("name");
            if (name !== undefined && name !== null) {
                const regex = /\[[\d]+\]/gi;
                var newname = name.replace(regex, `[${index}]`);
                $(itemdata).attr("name", newname);
            }
        });

Answer 3

You can simple remove index numbers instead of sequencing. Browsers still will pass the values as an array while keeping order.

let allIndexedElements=document.querySelectorAll('[name*="item["]');
for (const el of allIndexedElements) {
    el.name = el.name.replace(/\[\d+\]/ig, '[]');
 }

If you want to make sure the order will be kept, you can increment an index number instead of removing it.