Javascript-форум - Автоматическое заполнение текстовых полей при выборе пункта из выпадающего списка

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Автоматическое заполнение текстовых полей при выборе пункта из выпадающего списка (https://javascript.ru/forum/dom-window/78757-avtomaticheskoe-zapolnenie-tekstovykh-polejj-pri-vybore-punkta-iz-vypadayushhego-spiska.html)

Цитата:

Сообщение от Marts

Мне надо создать отдельный файл, и что-то в него вписать?

:yes:
строки 2 - 6 перенести в например arr.js, и тогда вместо строк 1 - 7 будет

<script src="arr.js"></script>

Цитата:

Сообщение от Marts

а что вы имеете ввиду под словами "вынести в отдельный файл" Мне надо создать отдельный файл, и что-то в него вписать?

В общем смысле мое слово "файл" можно заменить на коллекцию (MongoDB) или таблицу (SQL-ные СУБД)...

Т.е. все будет определяться твоими возможностями.

Я до конца оформил мысль свою в моём прошлом сообщении, можете подсобить ?
Или мне надо 2й .js создать и дублировать туда данные для второй формы на одной странице?(Хотя попробовал, так тоже не работает)

Для второй формы просто уже к селекту совершенно другой id подписал как "ars" которого нету ни где, но Данные подставляет из client.js в первую форму.

<ul class="list list--mod">
                <li class="list-item">
                    <span class="list-span">ФИО</span>
                    <input type="text" name="fio2" data-number="0" class="input input_surname2" size="25">
                </li>
                <!--
                        <li class="list-item">
                            <span class="list-span">Имя</span>
                            <input type="text" data-number="0" class="input input_name2">
                        </li>
                        <li class="list-item">
                            <span class="list-span">Отчество</span>
                            <input type="text" data-number="0" class="input input_patronymic2">
                        </li>
                -->
                <li class="list-item">
                    <span class="list-span">Вид ТС</span>
                    <input type="text" name="auto2" data-number="0" class="input input_view2">
                </li>
                <li class="list-item">
                    <span class="list-span">С/№ паспорта</span>
                    <input type="text" name="passport2" data-number="0" class="input input_passport2">
                </li>
                <li class="list-item">
                    <span class="list-span">Компания</span>
                    <input type="text" name="organ2" data-number="0" class="input input_company2">
                </li>
                <li class="list-item">
                    <span class="list-span">Число</span>
                    <script>
                        var d = new Date();
                        document.write('<input type="text" data-number="1" class="input input_top input-date input_date2" value="' + d.getDate() + '" >');
                    </script>
                    <span class="list-span">Месяц</span>
                    <script>
                        document.write('<input type="text" data-number="1" class="input input_top input-month input_month2" value="' + month[d.getMonth()] + '" >');
                    </script>
                    <!--	<input type="text" data-number="0" class="input input-month input_month2" value="июня"> -->
                </li>
            </ul>
            <button type="button" class="btn btn-default btn_bottom">Напечатать 2 бланка</button> <select id="ars">
				<option>Клиент ...</option>
				<option>Сидоренко С.С</option>
				<option>Пономаренко П.П</option>
			</select>
			<script>
			document.querySelector('#ars').addEventListener('change', function() {
			var d = arr[this.selectedIndex];
			for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k];
			})
			</script>

А вот отрезок от первой формы

<ul class="list">
                <li class="list-item">
                    <span class="list-span">ФИО</span>
                    <input type="text" name="fio" autocomplete="on" data-number="1" class="input input_top input_surname1" value=""
                           size="25">
                </li>

                <!--
                    <li class="list-item">
                        <span class="list-span">Имя</span>
                        <input type="text" autocomplete="on"  data-number="1" class="input input_top input_name1" value="">
                    </li>
                    <li class="list-item">
                        <span class="list-span">Отчество</span>
                        <input type="text" autocomplete="on" data-number="1" class="input input_top input_patronymic1" value="">
                        </li>
                -->
                <li class="list-item">
                    <span class="list-span">Вид ТС</span>
                    <input type="text" name="auto" autocomplete="on" data-number="1" class="input input_top input_view1" value="">
                </li>
                <li class="list-item">
                    <span class="list-span">С/№ паспорта</span>
                    <input type="text" name="passport" autocomplete="on" data-number="1" class="input input_top input_passport1"
                           value="">
                </li>
                </li class="list-item">
                <span class="list-span">Компания</span>
                <input type="text" name="organ" autocomplete="on" data-number="1" class="input input_top input_company1" value="">
                </li>
                <li class="list-item">
                    <span class="list-span">Число</span>
                    <script>
                        var d = new Date();
                        var month = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'];
                        document.write('<input type="text" data-number="1" class="input input_top input-date input_date1" value="' + d.getDate() + '" >');
                    </script>
                    <span class="list-span">Месяц</span>
                    <script>
                        document.write('<input type="text" data-number="1" class="input input_top input-month input_month1" value="' + month[d.getMonth()] + '" >');
                    </script>
                    <!--	<input type="text" data-number="1" class="input input_top input-month input_month1" value="Июль"> -->
                </li>
            </ul>
            <button type="button" class="btn btn-default btn_top">Напечатать 1 бланк</button> <select id="client">
				<option>Клиент ...</option>
				<option>Сидоренко С.С</option>
				<option>Пономаренко П.П</option>
			</select>
			<script>
			document.querySelector('#client').addEventListener('change', function() {
			var d = arr[this.selectedIndex];
			for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k];
			})
			</script>

Цитата:

Сообщение от Marts

Для первой формы я справился и подключил ваш пример! А как подключить ещё ко второй?

Вариант для двух "форм"...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
	const arr = [
		{passport: "", organ: "", data:""},
		{passport: "11 12 675677", organ: "Кукуевский ГОВД", data: "12.05.2000"},
		{passport: "18 22 970734", organ: "Гадюкинский ГОВД", data: "22.09.1989"}
	];
	document.querySelectorAll('.employees').forEach(el => {
		el.addEventListener('change', function() {
			const d = arr[this.selectedIndex];
			const o = el.closest('div')
			for(var k in d) o.querySelector('[name="'+k+'"]').value = d[k];
		})
	})
})
/*
$(_ => {
})
*/
</script>
</head>
<body>
<div>
	<select class="employees">
		<option>Сотрудник ...</option>
		<option>А. С. Сидоров</option>
		<option>В. П. Петров</option>
	</select>
	<input name="passport" />
	<input name="organ" />
	<input name="data" />
</div>
<div>
	<select class="employees">
		<option>Сотрудник ...</option>
		<option>А. С. Сидоров</option>
		<option>В. П. Петров</option>
	</select>
	<input name="passport" />
	<input name="organ" />
	<input name="data" />
</div>
</body>
</html>

Щас буду что-то пробовать! Надеюсь что нибудь у меня выйдет ^_^

А можете растолкововать немного? Что я делаю не так? (вообще по разному пытался)

Я так делаю?

Создал "Файл DOMContentLoaded.js" и поместил туда

document.addEventListener('DOMContentLoaded', _ => {
	const arr = [
		{passport: "", organ: "", data:"", fio:""},
		{passport: "11 12 675677", organ: "Кукуевский ГОВД", data: "12.05.2000", fio: "А. С. Сидоров"},
		{passport: "18 22 970734", organ: "Гадюкинский ГОВД", data: "22.09.1989", fio: "В. П. Петров"}
	];
	document.querySelectorAll('.employees').forEach(el => {
		el.addEventListener('change', function() {
			const d = arr[this.selectedIndex];
			const o = el.closest('div')
			for(var k in d) o.querySelector('[name="'+k+'"]').value = d[k];
		})
	})
})
/*
$(_ => {
})
*/

Добавил в html выпадающие списки (пока только к одной форме добавил)

<div>
	<select class="employees">
		<option>Сотрудник ...</option>
		<option>А. С. Сидоров</option>
		<option>В. П. Петров</option>
	</select>
</div>

К каждой из своих форм в input добавил
name="passport"
name="organ"
name="data"
name="fio"

Просто чёт пока не выходит у меня ни чего вообще) Думаю думаю

Цитата:

Сообщение от Marts

Что я делаю не так?

Цитата:

Сообщение от Marts

К каждой из своих форм в input добавил
name="passport"
name="organ"
name="data"
name="fio"

Цитата:

Сообщение от Marts

const o = el.closest('div')

const o в вашем случае должно указывать на конкретную форму

const o = el.closest('div') за место 'div' надо что-то другое указать? А не подскажите ?

<form autocomplete="on">
    <div class="wrap">
        <div class="left clearfix">
            <!--
    <div class="search">
       <form class="search" action="search.php" method="post">
             Поиск по ФИО: <input type="text" name="name"><br>
             <input type="submit">
       </form>
    </div>
           -->
            <ul class="list">
                <li class="list-item">
                    <span class="list-span">ФИО</span>
                    <input type="text" autocomplete="on" data-number="1" class="input input_top input_surname1" value=""
                           size="25">
                </li>

                <!--
                    <li class="list-item">
                        <span class="list-span">Имя</span>
                        <input type="text" autocomplete="on"  data-number="1" class="input input_top input_name1" value="">
                    </li>
                    <li class="list-item">
                        <span class="list-span">Отчество</span>
                        <input type="text" autocomplete="on" data-number="1" class="input input_top input_patronymic1" value="">
                        </li>
                -->
                <li class="list-item">
                    <span class="list-span">Вид ТС</span>
                    <input type="text" name="data" autocomplete="on" data-number="1" class="input input_top input_view1" value="">
                </li>
                <li class="list-item">
                    <span class="list-span">С/№ паспорта</span>
                    <input type="text" name="passport" autocomplete="on" data-number="1" class="input input_top input_passport1"
                           value="">
                </li>
                </li class="list-item">
                <span class="list-span">Компания</span>
                <input type="text" name="organ" autocomplete="on" data-number="1" class="input input_top input_company1" value="">
                </li>
                <li class="list-item">
                    <span class="list-span">Число</span>
                    <script>
                        var d = new Date();
                        var month = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'];
                        document.write('<input type="text" data-number="1" class="input input_top input-date input_date1" value="' + d.getDate() + '" >');
                    </script>
                    <span class="list-span">Месяц</span>
                    <script>
                        document.write('<input type="text" data-number="1" class="input input_top input-month input_month1" value="' + month[d.getMonth()] + '" >');
                    </script>
                    <!--	<input type="text" data-number="1" class="input input_top input-month input_month1" value="Июль"> -->
                </li>
            </ul>
            <button type="button" class="btn btn-default btn_top">Напечатать 1 бланк</button> 
			<div>
				<select class="employees">
				<option>Сотрудник ...</option>
				<option>А. С. Сидоров</option>
				<option>В. П. Петров</option>
				</select>
				<script>document.querySelectorAll('.employees').forEach(el => {
		el.addEventListener('change', function() {
			const d = arr[this.selectedIndex];
			const o = el.closest('list-item')
			for(var k in d) o.querySelector('[name="'+k+'"]').value = d[k];
		})</script>
			</div>

Цитата:

Сообщение от Marts

за место 'div' надо что-то другое указать?

Тут нужен селектор родительского элемента в котором селект вместе с другими полями с именами

Цитата:

Сообщение от Marts

name="passport"
name="organ"
name="data"
name="fio"

Цитата:

Сообщение от Marts

<ul class="list">

Этот родитель вроде должен подойти...

const o = el.closest('.list')