Малик,
...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul.ar{
display: flex;
list-style: none;
}
ul.ar:before{
content: "[";
}
ul.ar:after{
content: "]";
}
ul.ar li{
color: rgba(0, 0, 255, 1);
margin: 3px;
}
ul.ar li:after {
content: ",";
}
ul.ar li:last-child:after {
content: ""
}
ul.obj{
font-weight: bold;
}
ul.str{
color: rgba(34, 139, 34, 1);
list-style: none;
}
ul.str li:before{
content: open-quote;
quotes: "\00ab" "\00bb";
color: rgba(255, 69, 0, 1);
}
ul.str li:after{
content: close-quote;
quotes: "\00ab" "\00bb";
color: rgba(255, 69, 0, 1);
}
</style>
</head>
<body>
<form>
<div class=" container row col-md-4 mt-4" id="d1">
<div>
<label>Имя</label>
<input type="text" id="FirstName" class="form-control" placeholder="First name">
<label>Фамилия</label>
<input type="text" id="LastName" class="form-control" placeholder="Last name">
<label>Город</label>
<input type="text" id="City" class="form-control" placeholder="City">
<label>Телефон</label>
<input type="tel" id="Phone" class="form-control" placeholder="Number" >
<label>Вакансия</label>
<select class="form-control" id="Vacancy">
<option selected>Choose...</option>
<option value="Backend">Backend</option>
<option value="Web-Design">Web Design</option>
<option value="Frontend">Frontend Developer</option>
</select>
</div>
<input type="button" value="Далее" class="btn btn-primary"
onclick="document.getElementById ('d1').style.display = 'none';
document.getElementById ('d2').style.display = 'block'">
</div>
<div id="d2" style="display: none;">
<div class="form-5 form-group">
<label for="Question" class="question">Вопрос:</label>
<input type="text" class="form-control" id="validationTextarea" placeholder="Какие языки программирования Вы используете?"> </div>
<div class="custom-control custom-checkbox form-control form-6">
<input type="checkbox" class="custom-control-input" id="CustomCheck1" value="c#">
<label class="custom-control-label" for=>C#</label>
</div>
<div class="custom-control custom-checkbox form-control form-7">
<input type="checkbox" class="custom-control-input" id="CustomCheck2" value="c++" >
<label class="custom-control-label" for="CustomCheck2">C++</label>
</div>
<div class="custom-control custom-checkbox form-control form-8">
<input type="checkbox" class="custom-control-input" id="CustomCheck3" value="asp.net" >
<label class="custom-control-label" for="CustomCheck3">ASP.NET</label>
</div>
<div class="custom-control custom-checkbox form-control form-9" >
<input type="checkbox" class="custom-control-input" id="CustomCheck4" value="php" >
<label class="custom-control-label" for="CustomCheck3">PHP</label><br>
</div>
<input type="button" value="Далее" class="btn btn-primary"
onclick="document.getElementById ('d2').style.display = 'none';
document.getElementById ('d3').style.display = 'block'">
</div><br>
<div id="d3" style="display: none;">
<div class="form-5 form-group">
<label for="Question" class="question">Вопрос:</label>
<input type="text" class="form-control" id="validationTextarea" placeholder="С какими СУБД Вам приходилось работать?"> </div>
<div class="custom-control custom-checkbox form-control form-6">
<input type="checkbox" class="custom-control-input" id="CustomCheck5" value="mssql">
<label class="custom-control-label" for="CustomCheck5">MS-SQL Server 2000-2012/T-SQL</label>
</div>
<div class="custom-control custom-checkbox form-control form-7">
<input type="checkbox" class="custom-control-input" id="CustomCheck6" value="oracle" >
<label class="custom-control-label" for="CustomCheck6">Oracle</label>
</div>
<div class="custom-control custom-checkbox form-control form-8">
<input type="checkbox" class="custom-control-input" id="CustomCheck7" value="mysql" >
<label class="custom-control-label" for="CustomCheck7">MySQL</label>
</div>
<div class="custom-control custom-checkbox form-control form-9" >
<input type="checkbox" class="custom-control-input" id="CustomCheck8" value="postgresql" >
<label class="custom-control-label" for="CustomCheck8">PostgreSQL</label><br>
</div>
<input type="button" value="Далее" class="btn btn-primary"
onclick="document.getElementById ('d3').style.display = 'none';
document.getElementById ('d4').style.display = 'block'">
</div><br>
<div id="d4" style="display: none;">
<div class="form-5 form-group">
<label for="Question" class="question">Вопрос:</label>
<input type="text" class="form-control" id="validationTextarea" placeholder="С какими системами контроля версий Вы работали?"> </div>
<div class="custom-control custom-checkbox form-control form-6">
<input type="checkbox" class="custom-control-input" id="CustomCheck9" value="git">
<label class="custom-control-label" for="CustomCheck9">GIT</label>
</div>
<div class="custom-control custom-checkbox form-control form-7">
<input type="checkbox" class="custom-control-input" id="CustomCheck10" value="cvs" >
<label class="custom-control-label" for="CustomCheck10">CVS</label>
</div>
<div class="custom-control custom-checkbox form-control form-8">
<input type="checkbox" class="custom-control-input" id="CustomCheck11" value="subversion" >
<label class="custom-control-label" for="CustomCheck11">Subverion</label>
</div>
<div class="custom-control custom-checkbox form-control form-9" >
<input type="checkbox" class="custom-control-input" id="CustomCheck12" value="mercurial" >
<label class="custom-control-label" for="CustomCheck12">Mercurial</label><br>
</div>
<input type="submit" value="Далее" class="btn btn-primary" onclick="convert_to_json(event)">
</div><br>
</form>
<output></output>
</body>
<script>
function convert_to_json(event) {
event.preventDefault();
const checArr = arr => arr.filter(({
checked
}) => checked).map(({
value
}) => value);
profile = {
name: FirstName.value,
lastname: LastName.value,
city: City.value,
phone: Phone.value,
vacancy: Vacancy.value,
};
results = {
Lang_list: checArr([CustomCheck1,
CustomCheck2,
CustomCheck3,
CustomCheck4
]),
SUBD_list: checArr([CustomCheck5,
CustomCheck6,
CustomCheck7,
CustomCheck8
]),
SystemControl_list: checArr([CustomCheck9,
CustomCheck10,
CustomCheck11,
CustomCheck12
])
};
function recursiveList(data) {
let newlist = document.createElement("ul"),
item, children;
newlist.className = "obj";
if(Array.isArray(data)) {
newlist.className = "ar";
data.forEach(txt => {
item = document.createElement("li");
item.appendChild(document.createTextNode(txt));
newlist.appendChild(item);
})
}
else if(typeof data == "object") Object.keys(data).forEach(keys => {
item = document.createElement("li");
item.appendChild(document.createTextNode(keys));
newlist.appendChild(item);
children = recursiveList(data[keys]);
item.appendChild(children)
})
else {
newlist.className = "str";
item = document.createElement("li");
item.appendChild(document.createTextNode(data));
newlist.appendChild(item);
}
return newlist
};
let json = recursiveList(results);
let json2 = recursiveList(profile);
document.querySelector("output").append(json, json2);
}
</script>
</html>