shareware,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.prepare ul li:not(:nth-child(1)){
margin-left: 10px;
}
.prepare ul{
justify-content: center;
display: flex;
}
.prepare ul li{
list-style: none;
padding: 10px 0;
transition: all .3s;
cursor: pointer;
color: rgb(0 0 0 / 47%);
}
.prepare ul li.active{
box-shadow: 0 2px 0 0px #0000ee;
color: black;
}
.prepare ul li:hover{
list-style: none;
box-shadow: 0 2px 0 0px #0000ee;
color: black;
}
.error-block{
text-align: center;
}
.error-block p{
font-size: 14px;
opacity: 0;
color: red;
transition: all .3s;
}
.error{
box-shadow: inset 0 0 0 1px red;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let map;
let txt = [
['Введите серию документа', 'Введите номер документа'],
['Программа обучения', 'Введите ФИО']
];
let mode = ['seria_number', 'fio_po'];
let key = [
['document', 'seria'],
['po', 'fio']
];
let parent = document.querySelector('.prepare');
let label = parent.querySelectorAll('.input-label')
let inputs = parent.querySelectorAll('input.custom-input');
let li = parent.querySelectorAll('li.mode');
let errBlock = document.querySelector('.error-block p');
let btn = document.querySelector('.send-btn');
let current = 0;
let err = false;
const errorHandler = _ => {
err = false;
inputs.forEach(el => {
let er = !el.value.trim();
el.classList.toggle('error', er);
if(er) err = true;
} )
errBlock.style.opacity = +err;
return !err;
}
const reset = _ => {
inputs.forEach(el => (el.value = '', el.classList.remove('error')));
label.forEach((el, i) => el.textContent = txt[current][i]);
errBlock.style.opacity = 0;
err = false;
map.clear();
}
const createMap = _ => {
if(err) errorHandler();
let ar = key[current].map((k, i) => [k, inputs[i].value]);
map = new Map(ar)
map.set('mode', mode[current]);
console.log(map)
}
parent.addEventListener('click', ({
target
}) => {
if (target = target.closest('li.mode')) {
li[current].classList.remove('active');
current = [...li].indexOf(target);
li[current].classList.add('active');
reset()
}
})
parent.addEventListener('input', createMap);
btn.addEventListener('click', errorHandler);
createMap();
});
</script>
</head>
<body>
<div class="prepare">
<ul>
<li class="mode active">Поиск по серии и номеру документа</li>
<li class="mode" >Поиск по ФИО и программе обучения</li>
</ul>
<div class="error-block">
<p>Исправьте то, что обведено красным</p>
</div>
<div class="d-flex center-flex">
<div class="prepare-block">
<p class="input-label">Введите номер документа</p>
<input type="text" class="custom_one custom-input" value="" placeholder="xxxxxx">
</div>
<div class="prepare-block">
<p class="input-label">Введите серию документа</p>
<input type="text" class="custom_two custom-input" value="" placeholder="xxxxxx">
</div>
</div>
</div>
<button class="send-btn">test</button>
</body>
</html>