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)

Александр Денисов 31.10.2019 12:11
Автоматическое заполнение текстовых полей при выборе пункта из выпадающего списка
 
Добрый день! Я не программист, просто делаю для себя PDF файл в программе PDF Exchange Writer, столкнулся с проблемой, которую можно, видимо, решить через написание на JavaScript скрипта.

Документ - доверенность. Есть форма с выпадающим списком сотрудников.
И есть три поля в которых указаны 1) серия и номер паспорта, 2) кем выдан, 3) дата выдачи.

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

Смутно вспоминая С++ вроде была такая функция как switch/case... Но как её написать на JavaScript не представляю... тем более как обращаться к элементам списка? им какой-то id, вероятно, должен присваиваться?

ksa 31.10.2019 12:29
Цитата:
Сообщение от Александр Денисов
Как сделать, чтобы при выборе фамилии сотрудника из выпадающего списка, автоматически заполнялись данные паспорта?
Все эти данные нужно где-то хранить...
Цитата:
Сообщение от Александр Денисов
Смутно вспоминая С++ вроде была такая функция как switch/case...
И хранить явно не в скриптовом коде... :no:

laimas 31.10.2019 13:28
Цитата:
Сообщение от Александр Денисов
им какой-то id, вероятно, должен присваиваться?
Не обязательно. Данные можно хранить в data атрибутах списка как json, в котором имена свойств будут равны именам полей. Получив из атрибута выбранной опции объект, обходом его в цикле определять значения для полей с именем равным свойству.

Александр Денисов 31.10.2019 17:46
Цитата:
Сообщение от ksa (Сообщение 514713)
Все эти данные нужно где-то хранить...

И хранить явно не в скриптовом коде... :no:
А поля выпадающего списка вроде бы не ограничены по длине?
Быть может тогда вписывать в эти поля полные данные сотрудников, а скриптом выбирать значения, вставлять в соответствующие поля и разбивать строку по символам, хоть по / или по *?

laimas 31.10.2019 17:59
Я не знаю каково назначение этих полей, а разместить данные можно по разному. Например, значение списка, как и значение полей не только для документа, но и для сервера. В этом случае поле value опций использовать нельзя. Здесь это свойство опций содержит идентификаторы сотрудников, а информация о них в data атрибутах и это объект, а далее как было написано выше:

<select name="employees">
    <option value="">Сотрудник ...</option>
    <option value="1" data-info='{"passport":"11 12 675677","organ":"Кукуевский ГОВД","data":"12.05.2000"}'>А. С. Сидоров</option>
    <option value="2" data-info='{"passport":"18 22 970734","organ":"Гадюкинский ГОВД","data":"22.09.1989"}'>В. П. Петров</option>
</select>
<input name="passport" />
<input name="organ" />
<input name="data" />
<script>
document.querySelector('[name="employees"]').addEventListener('change', function() {
    var d = JSON.parse(this.options[this.selectedIndex].dataset.info);
    if(this.value) for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k]
})
</script>


Если список не выполняет такой роли, то данные можно помещать и свойство value опций, что облегчает их получение:

<select id="employees">
    <option value="">Сотрудник ...</option>
    <option value='{"passport":"11 12 675677","organ":"Кукуевский ГОВД","data":"12.05.2000"}'>А. С. Сидоров</option>
    <option value='{"passport":"18 22 970734","organ":"Гадюкинский ГОВД","data":"22.09.1989"}'>В. П. Петров</option>
</select>

<input name="passport" />
<input name="organ" />
<input name="data" />
<script>
document.querySelector('#employees').addEventListener('change', function() {
    var d = JSON.parse(this.value);
    if(this.value) for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k]
})
</script>


Можно хранить данные и как массив или просто строки из которой получать массив, и помещая их по индексу в наборе полей:

<select id="employees">
    <option value="">Сотрудник ...</option>
    <option value="11 12 675677,Кукуевский ГОВД,12.05.2000">А. С. Сидоров</option>
    <option value="18 22 970734,Гадюкинский ГОВД,22.09.1989">В. П. Петров</option>
</select>
<div id="pass">
    <input />
    <input />
    <input />
</div>
<script>
document.querySelector('#employees').addEventListener('change', function() {
    var f = document.querySelector('#pass').querySelectorAll('input');
    if(this.value) this.value.split(',').forEach((v, i) => f[i].value = v) 
})
</script>


В общем способов решений много.

ksa 01.11.2019 07:28
Цитата:
Сообщение от Александр Денисов
А поля выпадающего списка вроде бы не ограничены по длине?
Даже если хранить данные сотрудников в html-тегах - можно использовать атрибуты тех тегов, коих можно создать предостаточно...

Но есть много других вариантов для хранения тех данных. Про них выше писал laimas.

ksa 01.11.2019 07:36
Можно вообще данные сотрудников вынести в отдельный файл...

<script type='text/javascript'>
var arr=[
	{passport:"",organ:"",data:""},
	{passport:"11 12 675677",organ:"Кукуевский ГОВД",data:"12.05.2000"},
	{passport:"18 22 970734",organ:"Гадюкинский ГОВД",data:"22.09.1989"}
];
</script>
<select id="employees">
    <option>Сотрудник ...</option>
    <option>А. С. Сидоров</option>
    <option>В. П. Петров</option>
</select>
<input name="passport" />
<input name="organ" />
<input name="data" />
<script>
document.querySelector('#employees').addEventListener('change', function() {
    var d = arr[this.selectedIndex];
    for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k];
})
</script>

copkrg@gmail.com 01.11.2019 07:57
Нужна ваша помочь в проекте.
 
:help: Добро утро! Можете помочь с проектом. У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit другой заминающей символ. Я сделал в отдельном странице как смог но он сыроват. Тоже могу этот код закинуть. 

var
  gl_pos=false;
  v_kz='Á',
  cur_pos=0;


window.onload=new_obj();

function new_obj(){
  var div=document.createElement('div');
  div.className = "main_module";
  div.id = "main_module";
  document.body.append(div);

  var $ = document, // shortcut
    head  = $.getElementsByTagName('head')[0],
    link  = $.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'cod.css';
    head.appendChild(link);
}



//Загружает в меню необходимые символы для выбора
function load_char(int_chr){
var m_modul=document.getElementById('main_module');

////////////////// Буква 'A'
if (int_chr=='A'){
  m_modul.innerHTML='Á';
  v_kz='Á',
  m_modul.style.display='block';
}

if (int_chr=='a'){
  m_modul.innerHTML='á';
  v_kz='á',
  m_modul.style.display='block';
}

////////////////// Буква 'G'
if (int_chr=='G'){
  m_modul.innerHTML='Ǵ';
  v_kz='Ǵ',
  m_modul.style.display='block';
}

if (int_chr=='g'){
  m_modul.innerHTML='ǵ';
  v_kz='ǵ',
  m_modul.style.display='block';
}

////////////////// Буква 'N'
if (int_chr=='N'){
  m_modul.innerHTML='Ń';
  v_kz='Ń',
  m_modul.style.display='block';
}

if (int_chr=='n'){
  m_modul.innerHTML='ń';
  v_kz='ń',
  m_modul.style.display='block';
}

////////////////// Буква 'O'
if (int_chr=='O'){
  m_modul.innerHTML='Ó';
  v_kz='Ó',
  m_modul.style.display='block';
}

if (int_chr=='o'){
  m_modul.innerHTML='ó';
  v_kz='ó',
  m_modul.style.display='block';
}

////////////////// Буква 'U'
if (int_chr=='U'){
  m_modul.innerHTML='Ú';
  v_kz='Ú',
  m_modul.style.display='block';
}

if (int_chr=='u'){
  m_modul.innerHTML='ú';
  v_kz='ú',
  m_modul.style.display='block';
}

////////////////// Буква 'Y'
if (int_chr=='Y'){
  m_modul.innerHTML='Ý';
  v_kz='Ý',
  m_modul.style.display='block';
}

if (int_chr=='y'){
  m_modul.innerHTML='ý';
  v_kz='ý',
  m_modul.style.display='block';
}

};


//Функция мониторить вводимые символы и взаимодействует с табличкой выбора шрифта
function sel(itxt){
  var m_modul2=document.getElementById('main_module'),
      s_temp=document.getElementById(itxt),

      m_pos=document.getElementById(itxt).getBoundingClientRect();

      m_modul2.style.top=m_pos.top+(m_pos.bottom-m_pos.top)+'px';
      m_modul2.style.left=m_pos.left+'px';
      m_modul2.style.width=(m_pos.right-m_pos.left)+'px';

getCaretPosition(itxt);


  //Клавиша вверх
  if (event.keyCode==38){
    m_modul2.classList.remove("sellect");
    gl_pos=false;
    event.preventDefault();
    return false;
  };

  //Клавиша вниз
  if (event.keyCode==40){
    m_modul2.classList.add("sellect");
    gl_pos=true;
    event.preventDefault();
    return false;
  };

  //отследижение нажатия на center
  if (event.keyCode == 13) {
  if (gl_pos == true) {
    s_temp.value = s_temp.value.slice(0, cur_pos - 1) + s_temp.value.slice(cur_pos);
    document.getElementById(itxt).value = s_temp.value + v_kz;
    gl_pos = false;
    event.preventDefault();
  };
  m_modul2.classList.remove("sellect");
};

  //Скрывает модуль если нет совпадении на казахские символы
  m_modul2.style.display='none';

  if (event.key=='A') load_char('A');
  if (event.key=='a') load_char('a');

  if (event.key=='G') load_char('G');
  if (event.key=='g') load_char('g');

  if (event.key=='N') load_char('N');
  if (event.key=='n') load_char('n');

  if (event.key=='O') load_char('O');
  if (event.key=='o') load_char('o');

  if (event.key=='U') load_char('U');
  if (event.key=='u') load_char('u');

  if (event.key=='Y') load_char('Y');
  if (event.key=='y') load_char('y');
};



//Позиция курсора Input  посимвольно
function getCaretPosition(obj){
    var cursorPos = null,
    s_temp='';

    if (document.selection){
        var range = document.selection.createRange();
        range.moveStart('textedit', -1);
        cursorPos = range.text.length;
    }
    else
    {
        cursorPos = obj.selectionStart;
    };

    cur_pos=cursorPos;

}



css
#int_test{
  position: absolute;
  font-size: 18px;
  padding-left: 20px;
  padding: 3px;
  width: 200px;
  margin:250px;
}

.main_module{
  position: absolute;
  text-align: center;
  font-size: 30px;
  background-color: #eeeeee;
  border: 1px solid #8a8a8a;
  display: none;
  box-sizing: border-box;
}

.sellect{
  background-color: yellow;
}


Если смотреть на мой код то там просто позиций указаны относительно x/y и это не правильно работает при выставление на страницу проекта.

http://demo.artweb.kz/qazaq/autopas/index.html - здесь надо выбирать символ стрелкой Вниз+Enter.

*-*-*-*--*

У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit и только под этой буквой другой заминающей символ и также потом для выбора Вниз+Enter нажат и он вставился в это место в Edit

ksa 01.11.2019 08:08
copkrg@gmail.com, все твои "портянки" типа этой
Цитата:
Сообщение от copkrg@gmail.com 
////////////////// Буква 'A'
if (int_chr=='A'){
  m_modul.innerHTML='Á';
  v_kz='Á',
  m_modul.style.display='block';
}

if (int_chr=='a'){
  m_modul.innerHTML='á';
  v_kz='á',
  m_modul.style.display='block';
}

////////////////// Буква 'G'
if (int_chr=='G'){
  m_modul.innerHTML='Ǵ';
  v_kz='Ǵ',
  m_modul.style.display='block';
}

if (int_chr=='g'){
  m_modul.innerHTML='ǵ';
  v_kz='ǵ',
  m_modul.style.display='block';
}
Запросто оформляется объектом...
var obj {
	'A': 'Á',
	'a': 'á',
	'G': 'Ǵ',
	'g': 'ǵ',
};
if (obj[int_chr]){
  m_modul.innerHTML=obj[int_chr];
  v_kz=obj[int_chr];
  m_modul.style.display='block';
}

Marts 30.09.2022 08:52
Цитата:
Сообщение от ksa (Сообщение 514750)
Можно вообще данные сотрудников вынести в отдельный файл...

<script type='text/javascript'>
var arr=[
	{passport:"",organ:"",data:""},
	{passport:"11 12 675677",organ:"Кукуевский ГОВД",data:"12.05.2000"},
	{passport:"18 22 970734",organ:"Гадюкинский ГОВД",data:"22.09.1989"}
];
</script>
<select id="employees">
    <option>Сотрудник ...</option>
    <option>А. С. Сидоров</option>
    <option>В. П. Петров</option>
</select>
<input name="passport" />
<input name="organ" />
<input name="data" />
<script>
document.querySelector('#employees').addEventListener('change', function() {
    var d = arr[this.selectedIndex];
    for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k];
})
</script>
Здравствуйте! Очень заинтересовался вашим примером! Я очень слаб ещё во всём этом, но учусь. Скажите, а что вы имеете ввиду под словами "вынести в отдельный файл" Мне надо создать отдельный файл, и что-то в него вписать? Или как-то путь указать? Я уже час пытаюсь расшифровать весь ваш пример:(

Прочитал эту статью https://javascript.ru/tutorial/foundation/start Вроде получается ваш пример использовать! Спасибо!

Вот только не могу понять, момента!
У меня есть страничка, где можно 2 формы заполнять
форма №1
ФИО
ТС
С/№
Компания

И
форма №2
ФИО
ТС
С/№
Компания

Что-бы можно выводить было 2 бланка на одной странице на печать. Для первой формы я справился и подключил ваш пример! А как подключить ещё ко второй? Что-бы данные брались так же из файлика .js ?

Думал сделать так, но когда выбираешь человека в первой форме из списка, данные подставляются сразу во вторую форму, а не в первую. А при выборе человека во второй форме, так же поставляется во вторую форму..
var arr=[
	{passport:"",organ:"",auto:"",fio:""},
	{passport:"5555 777777",organ:"ИП Александр",auto:"Додж к111кк 777",fio:"Повленко Павел Павлович"},
	{passport:"6666 666666",organ:"ИП Владимир",auto:"Додж к222кк 888",fio:"Сидеренко Сидор Сидорович"}
];

var arr=[
	{passport2:"",organ2:"",auto2:"",fio2:""},
	{passport2:"5555 777777",organ2:"ИП Александр",auto2:"Додж к111кк 777",fio2:"Повленко Павел Павлович"},
	{passport2:"6666 666666",organ2:"ИП Владимир",auto2:"Додж к222кк 888",fio2:"Сидеренко Сидор Сидорович"}
];


Рядом с первой формой я поместил и name="fio" | name="passport" | name="organ" | name="auto"
<select id="employees">
				<option>Клиент ...</option>
				<option>Павленко П.П</option>
				<option>Сидеренко .С.С</option>
			</select>
			<script>
			document.querySelector('#employees').addEventListener('change', function() {
			var d = arr[this.selectedIndex];
			for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k];
			})
			</script>

Ко второй форме name="fio2" | name="passport2" | name="organ2" | name="auto2"
<select id="employees2">
				<option>Клиент ...</option>
				<option>Павленко П.П</option>
				<option>Сидеренко .С.С</option>
			</select>
			<script>
			document.querySelector('#employees2').addEventListener('change', function() {
			var d = arr[this.selectedIndex];
			for(var k in d) document.querySelector('[name="'+k+'"]').value = d[k];
			})
			</script>

рони 30.09.2022 09:41
Цитата:
Сообщение от Marts
Мне надо создать отдельный файл, и что-то в него вписать?
:yes:
строки 2 - 6 перенести в например arr.js, и тогда вместо строк 1 - 7 будет 
<script src="arr.js"></script>

ksa 30.09.2022 09:56
Цитата:
Сообщение от Marts
а что вы имеете ввиду под словами "вынести в отдельный файл" Мне надо создать отдельный файл, и что-то в него вписать?
В общем смысле мое слово "файл" можно заменить на коллекцию (MongoDB) или таблицу (SQL-ные СУБД)...

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

Marts 30.09.2022 10:43
Я до конца оформил мысль свою в моём прошлом сообщении, можете подсобить ?
Или мне надо 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>

ksa 30.09.2022 12:51
Цитата:
Сообщение от 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>

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

Marts 30.09.2022 13:56
Вложений: 1
А можете растолкововать немного? Что я делаю не так? (вообще по разному пытался)


Я так делаю?

Создал "Файл 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"

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

рони 30.09.2022 14:09
Цитата:
Сообщение от Marts
Что я делаю не так?
Цитата:
Сообщение от Marts
К каждой из своих форм в input добавил
name="passport"
name="organ"
name="data"
name="fio"
Цитата:
Сообщение от Marts
const o = el.closest('div')
const o в вашем случае должно указывать на конкретную форму

Marts 30.09.2022 14:30
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>

ksa 30.09.2022 15:09
Цитата:
Сообщение от Marts
за место 'div' надо что-то другое указать?
Тут нужен селектор родительского элемента в котором селект вместе с другими полями с именами
Цитата:
Сообщение от Marts 
name="passport"
name="organ"
name="data"
name="fio"

ksa 30.09.2022 15:11
Цитата:
Сообщение от Marts 
<ul class="list">
Этот родитель вроде должен подойти...
const o = el.closest('.list')

Marts 30.09.2022 18:49
А файл DOMContentLoaded.js я правильно создал да??
И добавил в html
<script src="DOMContentLoaded.js"></script>

Простите ещё раз за такие глупые вопросы! Только только начинаю во всём этом копаться!

рони 30.09.2022 18:57
Marts,
главное чтоб работал! :)

Marts 30.09.2022 19:23
Вложений: 1
Да, главное что-бы работал =) Но пока что вообще ни куда ни чего не выводит ни один из 2х селектов. :-?

Отрезок 2х форм
<body>

<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" 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="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>
		<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')
			for(var k in d) o.querySelector('[name="'+k+'"]').value = d[k];
		})
		</script>
            <ul class="list list--mod">
                <li class="list-item">
                    <span class="list-span">ФИО</span>
                    <input type="text" name="fio" 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="data" data-number="0" class="input input_view2">
                </li>
                <li class="list-item">
                    <span class="list-span">С/№ паспорта</span>
                    <input type="text" name="passport" data-number="0" class="input input_passport2">
                </li>
                <li class="list-item">
                    <span class="list-span">Компания</span>
                    <input type="text" name="organ" 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 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')
			for(var k in d) o.querySelector('[name="'+k+'"]').value = d[k];
		})
		</script>


Файл 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('.list')
			for(var k in d) o.querySelector('[name="'+k+'"]').value = d[k];
		})
	})
})
/*
$(_ => {
})
*/

рони 30.09.2022 20:36
Marts,
может сначала букварь?

Marts 01.10.2022 07:09
Спасибо! Вы убили всё желание что-то пробовать. Попросил друга своего, всё мне сделал, всего доброго.

amrishhpuri 09.11.2022 11:18
Я до конца оформил мысль свою в моём прошлом сообщении, можете подсобить ?

hellodear.in

teatv download


Часовой пояс GMT +3, время: 16:40.