Работа с формами. JS

216

29 сентября 2018, 04:10

Нигде не могу найти ответа. Допустим у меня есть данная форма:

<form class="formDima">
    <input type="text"  name="1">
    <input type="text"  name="2">
    <input type="text"  name="3">
    <input type="text"  name="4">
    <input type="submit" value="Ок">
</form>

Я хочу, чтобы по клику submit создавался объект с введенными данными в форму. И данный объект добавлялся в массив. Чтобы при новом клике создался новый объект.... Подскажите источники или примерно как это можно реализовать. спасибо.

Answer 1

function get_input(form){
   let els = document.querySelectorAll(form+' [name]'),
       arr = [];
   for(let i=0; i<els.length; i++){
    arr[els[i].name] = els[i].value
   }
   return arr;
}

Когда нужно получить данные с формы в виде массива, вызываем функцию get_input, где в качестве аргумента указываем селектор формы и получаем объект ( ассоциативный массив). Если какой-то элемент формы не нужен, просто в нем не указываем атрибут name

get_input('.formDima');

Answer 2

Формы предназначены для отправки данных на сервер. В вашем же случае форму использовать нет смысла.

var data = []; 
function savedata(){ 
  let item = { 
    1: $('input[name=1]').val(), 
    2: $('input[name=2]').val(), 
    3: $('input[name=3]').val(), 
    4: $('input[name=4]').val(), 
  }; 
  data.push(item); 
  console.log(data); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" name="1"> 
<input type="text" name="2"> 
<input type="text" name="3"> 
<input type="text" name="4"> 
<input type="button" onclick="savedata()" value="Ок">

После клика по кнопке в массив записывается объект с указанными полями, и в консоли выводится весь массив объектов.