JS ассоциативный массив из поля ввода формы

Question

Моя форма содержит несколько полей ввода.Например:

<input type="number" class="attribute-class form-control"  id="Size" min="1" max="99999" name="attribute[]">
<input type="number" class="attribute-class form-control"  id="weight" min="1" max="99999" name="attribute[]">

Теперь я хочу создать массив, что-то вроде этого array[size => 10, weight=> 20]

Это вообще возможно?До сих пор я использовал эту функцию, которую я нашел в другой теме, но я получаю обычный массив только со значением полей.

var attribute = $("input[name='attribute[]']").map(function(){
            return $(this).val();}).get(); 

Причина этого: мне нужно загрузить дополнительные поля ввода в моей форме с помощью ajax,в зависимости от того, какой тип продукта выбирает пользователь, а затем я должен сохранить имя поля и значение в базе данных.Это единственный вариант, о котором я мог подумать.

Answer 1

Кажется, что вы хотите создать объект для хранения значений из ваших полей ввода,

Возможно, попробуйте что-то вроде этого:

    var myObject = {};
    document.querySelectorAll("input[name='attribute[]']").forEach(element => {
       myObject[element.id] = element.value
    });
    console.log(myObject); // <-- this should have your values in it now.

В JavaScript нет ассоциативных массивов, используйтеобъект JavaScript, который очень похож.

Answer 2

Вам нужно создать объект, а не массив.Вы хотите использовать идентификаторы в качестве имен свойств в объекте.

$("#x").click(function() {
  var attribute = {};
  $("input[name='attribute[]']").each((i, input) => attribute[input.id.toLowerCase()] = input.value);
  console.log(JSON.stringify(attribute));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Size: 
<input type="number" class="attribute-class form-control" id="Size" min="1" max="99999" name="attribute[]"><br> 
Weight:
<input type="number" class="attribute-class form-control" id="weight" min="1" max="99999" name="attribute[]">
<br>
<button id="x">Click</button>