Как заполнить поля формы данными из массива?

174

28 июня 2018, 14:20

Есть форма и массив. Как сделать, чтобы по щелчку по кнопке заполнилась форма соответственно ключам?

var contacts = 
[ 
	{ 
		name: 'Ivan', 
		surname: 'Ivanov', 
		phone: 123123123 
	} 
];

#customerId 
{ 
	width: 200px; 
	margin: 0 auto; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
<title>Задание 2</title> 
<form name="customer" id="customerId"> 
	<div class="form-group"> 
		<label for = 'name'>Ваше имя</label> 
		<input class="form-control" id="name" type="text" name="customerName" placeholder="введите имя" rule-required/> 
	</div> 
	<div class="form-group"> 
		<label for = 'lastname'>Ваша Фамилия </label> 
		<input class="form-control" id="lastname" type="text" placeholder=" введите фамилию" rule-required/> 
	</div> 
	<div class="form-group"> 
		<label for = 'number'>Номер телефона</label> 
		<input class="form-control" id="number" type="text" placeholder="введите номер"/> 
	</div> 
	<div class="form-group"> 
		<input class="form-control" id="code" type="text" hidden placeholder="code"/> 
	</div> 
	<div class="form-group"> 
		<button type="button" onclick="getAdd(this.form)" class="btn btn-default" id="btn">Добавить</button> 
	</div>

Answer 1

Если нужно отправлять данные на сервер, то нужно добавить атрибуты name="customerSurname" и name="customerPhone" для 2-ого и 3-его input. Я их добавил ниже. Иначе сервер не получит данных из них. Атрибут name="customerName" у вас уже был для первого поля.

Используя эти атрибуты мы можем напрямую через объект формы обращаться к input-объектам, к примеру так: form.customerName. При этом нам не нужно выискивать их через document.getElementById и поэтому id для input-ов излишни.

Также у вас не хватает закрывающего тега к форме: </form>.

Ещё у вас ошибка в том, что вы написали type="text" hidden, а надо type="hidden", поскольку hidden - это значение атрибута, а не атрибут.

В общем, я сделал так, как вы пожелали в своём комментарии здесь - т. е. при нажатии на кнопку выбирается следующий объект с данными и ими заполняется форма. Если данные заканчиваются, то начинаем сначала, и так по кругу.

var index = 0; 
 
var contacts = 
[ 
	{ 
		name: 'Ivan', 
		surname: 'Ivanov', 
		phone: 123123123 
	}, 
	{ 
		name: 'Вася', 
		surname: 'Васильев', 
		phone: 312231231 
	}, 
	{ 
		name: 'Iva545n', 
		surname: 'Iva5677nov', 
		phone: 23123 
	}, 
	{ 
		name: 'Tya545n', 
		surname: 'Grt7nov', 
		phone: 2343423 
	} 
]; 
 
 
function getAdd(form) 
{ 
	//ставим index в начало, если список закончился 
	if(index > contacts.length - 1) 
		index = 0; 
 
	form.customerName.value = contacts[index].name; 
	form.customerSurname.value = contacts[index].surname; 
	form.customerPhone.value = contacts[index].phone; 
 
	index++; 
}

#customerId 
{ 
	width: 200px; 
	margin: 0 auto; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
<title>Задание 2</title> 
<form name="customer" id="customerId"> 
	<div class="form-group"> 
		<label for = 'name'>Ваше имя</label> 
		<input class="form-control" id="name" name="customerName" type="text" placeholder="введите имя" rule-required/> 
	</div> 
	<div class="form-group"> 
		<label for = 'lastname'>Ваша Фамилия </label> 
		<input class="form-control" id="lastname" name="customerSurname" type="text" placeholder=" введите фамилию" rule-required/> 
	</div> 
	<div class="form-group"> 
		<label for = 'number'>Номер телефона</label> 
		<input class="form-control" id="number" name="customerPhone" type="text" placeholder="введите номер"/> 
	</div> 
	<div class="form-group"> 
		<input class="form-control" id="code" type="hidden" placeholder="code"/> 
	</div> 
	<div class="form-group"> 
		<button type="button" onclick="getAdd(this.form)" class="btn btn-default" id="btn">Добавить</button> 
	</div> 
</form>

Answer 2

var contacts = [{ 
  name: 'Ivan', 
  surname: 'Ivanov', 
  phone: 123123123 
}]; 
 
function getAdd() { 
  document.getElementById('name').value = contacts[0].name; 
  document.getElementById('lastname').value = contacts[0].surname; 
  document.getElementById('number').value = contacts[0].phone; 
}

#customerId { 
  width: 200px; 
  margin: 0 auto; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
 
<form name="customer" id="customerId"> 
  <div class="form-group"> 
    <label for='name'>Ваше имя</label> 
    <input class="form-control" id="name" type="text" name="customerName" placeholder="введите имя" rule-required/> 
  </div> 
  <div class="form-group"> 
    <label for='lastname'>Ваша Фамилия </label> 
    <input class="form-control" id="lastname" type="text" placeholder=" введите фамилию" rule-required/> 
  </div> 
  <div class="form-group"> 
    <label for='number'>Номер телефона</label> 
    <input class="form-control" id="number" type="text" placeholder="введите номер" /> 
  </div> 
  <div class="form-group"> 
    <input class="form-control" id="code" type="text" hidden placeholder="code" /> 
  </div> 
  <div class="form-group"> 
    <button type="button" onclick="getAdd()" class="btn btn-default" id="btn">Добавить</button> 
  </div>

Answer 3

Как вариант, добавьте input'ам dataset (например, data-key="name") с соответствующими ключам из вашего объекта названиям, потом соберите их в массив:

var elems = document.querySelectorAll('*[data-key]');

И при переборе Вашего объекта, просто передавайте значения из него в input'ы. Пример кода:

    var contacts = [{
        name: 'Ivan',
        surname: 'Ivanov',
        phone: 123123123
    }];
    var elems = document.querySelectorAll('*[data-key]');
    for (let index = 0; index < elems.length; index++) {
        // значение из dataset
        var val = elems[index].dataset.key;
        // проверка наличия данного ключа в вашем объекте
        if (val in contacts[0]) {
            // передача значения в input
            elems[index].value = contacts[0][val];
        }
    }

Всё это можно положить в функцию и саму функцию передавать при нажатии на кнопку. Например:

var btn = document.getElementById('btn');

btn.addEventListener('click', yourFn);