Автоматическое заполнение текстовых полей при выборе пункта из выпадающего списка
Добрый день! Я не программист, просто делаю для себя PDF файл в программе PDF Exchange Writer, столкнулся с проблемой, которую можно, видимо, решить через написание на JavaScript скрипта.
Документ - доверенность. Есть форма с выпадающим списком сотрудников. И есть три поля в которых указаны 1) серия и номер паспорта, 2) кем выдан, 3) дата выдачи. Как сделать, чтобы при выборе фамилии сотрудника из выпадающего списка, автоматически заполнялись данные паспорта? Смутно вспоминая С++ вроде была такая функция как switch/case... Но как её написать на JavaScript не представляю... тем более как обращаться к элементам списка? им какой-то id, вероятно, должен присваиваться? |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Быть может тогда вписывать в эти поля полные данные сотрудников, а скриптом выбирать значения, вставлять в соответствующие поля и разбивать строку по символам, хоть по / или по *? |
Я не знаю каково назначение этих полей, а разместить данные можно по разному. Например, значение списка, как и значение полей не только для документа, но и для сервера. В этом случае поле 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>
В общем способов решений много. |
Цитата:
Но есть много других вариантов для хранения тех данных. Про них выше писал laimas. |
Можно вообще данные сотрудников вынести в отдельный файл...
<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>
|
Нужна ваша помочь в проекте.
: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 |
copkrg@gmail.com, все твои "портянки" типа этой
Цитата:
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';
}
|
Цитата:
Прочитал эту статью 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>
|
| Часовой пояс GMT +3, время: 05:59. |