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

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

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

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

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

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

[ksa]

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

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

Смутно вспоминая С++ вроде была такая функция как switch/case...

И хранить явно не в скриптовом коде...

[laimas]

им какой-то id, вероятно, должен присваиваться?

Не обязательно. Данные можно хранить в data атрибутах списка как json, в котором имена свойств будут равны именам полей. Получив из атрибута выбранной опции объект, обходом его в цикле определять значения для полей с именем равным свойству.

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

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

И хранить явно не в скриптовом коде...

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

[laimas]

Я не знаю каково назначение этих полей, а разместить данные можно по разному. Например, значение списка, как и значение полей не только для документа, но и для сервера. В этом случае поле 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]

А поля выпадающего списка вроде бы не ограничены по длине?

Даже если хранить данные сотрудников в html-тегах - можно использовать атрибуты тех тегов, коих можно создать предостаточно...

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

[ksa]

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

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

Добро утро! Можете помочь с проектом. У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у 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]

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]

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