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

Александр Денисов

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

Все эти данные нужно где-то хранить...

И хранить явно не в скриптовом коде... :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').addEventListe ner('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').addEventListe ner('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').addEventListe ner('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).getBoundingCli entRect();

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, все твои "портянки" типа этой

////////////////// Буква '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

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

<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').addEventListe ner('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').addEventListe ner('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').addEventList ener('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

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

ksa

30.09.2022, 09:56

а что вы имеете ввиду под словами "вынести в отдельный файл" Мне надо создать отдельный файл, и что-то в него вписать?
В общем смысле мое слово "файл" можно заменить на коллекцию (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" 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>

</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('c hange', 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" 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>

</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

Для первой формы я справился и подключил ваш пример! А как подключить ещё ко второй?
Вариант для двух "форм"...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<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

А можете растолкововать немного? Что я делаю не так? (вообще по разному пытался)
https://disk.yandex.ru/i/Fp2mvoijP7RGOw

Я так делаю?

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

Что я делаю не так?
К каждой из своих форм в input добавил
name="passport"
name="organ"
name="data"
name="fio"

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">

<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" 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>

</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

за место 'div' надо что-то другое указать?
Тут нужен селектор родительского элемента в котором селект вместе с другими полями с именами
name="passport"
name="organ"
name="data"
name="fio"

ksa

30.09.2022, 15:11

<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

Да, главное что-бы работал =) Но пока что вообще ни куда ни чего не выводит ни один из 2х селектов. :-?

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

<form autocomplete="on">
<div class="wrap">
<div class="left clearfix">

<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" 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>

</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" 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>

</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,
может сначала букварь (https://learn.javascript.ru/)?

Marts

01.10.2022, 07:09

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

amrishhpuri

09.11.2022, 11:18

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

hellodear.in (https://hellodear.in/)

teatv download (https://teatv.ltd/)