Как сделать автозаполнение данных в форме?
Доброго времени суток!
Подскажите, как сделать автозаполнение данных в форме, при выборе того или иного option в select.
При условии что тот самый option - это id строки из БД, данные которой, соответственно, и нужно подставить в имеющиеся поля формы
Скриншот формы с теми самыми ID,
которые подгружаются благодаря php циклу вывода данных из таблицы БД
Скриншот таблицы с данными из таблицы в БД, которые должны заполнятся в доступные поля поля формы выше
Структура таблицы ниже:
ID | *<img src="Данные из третей колонки"> | Ресурс | Категория | Название | Дата
Ответы (1 шт):
Ну например, в каждом теге <option> селекта "Выберите ID строки", сделать дата атрибут содержащий JSON-код с соответствующими значениями полей и при выборе пункта из списка получать данные из атрибута выбранного элемента и заполнять остальные поля.
<form>
<label>Выберите ID строки</label><br>
<select onchange="fillFormFields(this)">
<option>...</option>
<option value="43" data-fields='{"img":"img1.jpg","title":"Название 1"}'>43</option>
<option value="44" data-fields='{"img":"img2.jpg","title":"Название 2"}'>44</option>
<!-- ... остальные option -->
</select><br>
<input type="text" name="title" placeholder="Название"><br>
<!-- ... остальные поля формы -->
</form>
<script>
// функция для заполнения формы при выборе нового пункта
function fillFormFields(select){
if(select.selectedIndex > -1){
var option = select.options[select.selectedIndex];
var form = select.form;
if(option.dataset.fields){
var fields = JSON.parse(option.dataset.fields);
// теперь в fields у нас есть данные для заполнения полей
// Заполняем поле название
form.title.value = fields.title;
}else{
form.title.value = '';
}
}
}
</script>На бекэнде JSON можно сформировать фукцией json_encode передав в нее массив данных полученных из БД.
Но если данных очень много, то лучше использовать динамическую подгруздку с использованием Ajax.