Автоматическое заполнение текстовых полей при выборе пункта из выпадающего списка
Добрый день! Я не программист, просто делаю для себя 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:24. |