function Complete()
{
{
//let myCheckBox = document.querySelector("checkbox");
const mainForm = document.forms.main_form;
let checkedValue = '';
let inputElements = mainForm.interestInput;
let inputElementsSport = mainForm.interestInputSideSport;
let inputElementsSideDancing = mainForm.interestInputSideDancing;
for(let i=0; inputElements[i]; ++i)
{
if(inputElements[i].checked)
{
checkedValue += ' ' + inputElements[i].value;
if(i == 0){
for (let i = 0; inputElementsSport[i]; ++i){
if(inputElementsSport[i].checked){
checkedValue += ' ' + inputElementsSport[i].value;
}
}
}
else if(i==2){
for (let i = 0; inputElementsSideDancing[i]; ++i){
if(inputElementsSideDancing[i].checked){
checkedValue +=' ' + inputElementsSideDancing[i].value;
}
}
}
}
document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block";
}
const mainFormSignInput = mainForm.contactInput;
const mainFormSelectInput = mainForm.select;
const mainFormCommentInput = mainForm.commentInput
document.getElementById('valueName').innerHTML = document.getElementById('nameIn').value;
document.getElementById('valueDate').innerHTML = document.getElementById('dateIn').value;
document.getElementById('valueInterest').innerHTML = checkedValue;
document.getElementById('valueSign').innerHTML = mainFormSignInput.value;
document.getElementById('valueLife').innerHTML = mainFormSelectInput.value;
document.getElementById('valueComment').innerHTML = mainFormCommentInput.value;
document.getElementById('msgbx')
document.querySelector('.window_button').onclick = (event) =>{
document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none";
}
}
}
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>блоки</title>
<link rel="stylesheet" href="style_grid.css" type="text/css">
</head>
<body>
<div class = "container">
<div class = " head_wrapper" >
<div class = "head">
<div class = "logo"><img class = "logo_img" src = "" alt = "Логотип" align = left></div>
<div class = "header"> <h1> Сайт для анкетирования </h1> <h2> Использование js</h2></div>
</div>
</div>
<div class = "main_menu_wrapper">
<div class = "main_menu">
<div>
Поменять цвет анкеты <br>
<input type = "color" id = "color">
<button class = "color_button">Поменять</button>
</div>
<div>
Поменять размер шрифта анкеты <br>
<input type = "range" id = "textsh" min="10" max = "30" value="18"> <span>18</span><br>
</div>
</div>
</div>
<div class="wrapper_main">
<div class = "main">
<form method="get" name = "main_form" class = "js-form" onSubmit="Complete();">
<div class="block">
<legend>Ф.И.О</legend>
<input type = "text" id = "nameIn" class = "js-input" name = "nameInput" placeholder="Ваше имя">
<legend>Дата рождения</legend>
<input type="date" class = "js-input" id = "dateIn" name = "dateInput">
<legend>Выберите интересы</legend>
<div class = "interdiv">
<div class = "wrapper_sport">
<input type="checkbox" id="sport" name="interestInput" value="Спорт" onChange="toggleDiv(this);"/>
<label for="sport">Спорт</label>
<div id="sportDiv" style="display: none;">
<div>
<input type="checkbox" id="basketball" name="interestInputSideSport" value="Баскетбол" />
<label for="">Баскетбол</label>
</div>
<div>
<input type="checkbox" id="football" name="interestInputSideSport" value="Футбол" />
<label for="">Футбол</label>
</div>
</div>
</div>
<div class = "wrapper_singing">
<input type="checkbox" id="singing" name="interestInput" value="Пение"/>
<label for="singing">Пение</label>
</div>
<div class = "wrapper_dancing">
<input type="checkbox" id="dancing" name="interestInput" value="Танцы" onChange="toggleDiv(this);"/>
<label for="dancing">Танцы</label>
<div id="dancingDiv" style="display: none;">
<div>
<input type="checkbox" id="ballet" name="interestInputSideDancing" value="Балет" />
<label for="ballet">Балет</label>
</div>
<div>
<input type="checkbox" id="tango" name="interestInputSideDancing" value="Танго" />
<label for="tango">Танго</label>
</div>
</div>
<div class = "wrapper_right">
</div>
</div>
</div>
<legend>Пожалуйста выберите свой знак:</legend>
<div>
<input type="radio" id="contactChoice1" name="contactInput" value="Зодиака" >
<label for="contactChoice1">Зодиака</label>
<input type="radio" id="contactChoice2" name="contactInput" value="Дорожный" >
<label for="contactChoice2">Дорожный</label>
<input type="radio" id="contactChoice3" name="contactInput" value="" onChange="toggleDiv(this);"/>
<label for="contactChoice3">Другой</label>
<div id = "textDiv" style="display: none;">
<input type="text" id="contactChoice4" name = "contactInput" value="">
</div>
</div>
<div>
<label>
<legend>Хотели бы вы изменить свою жизнь</legend>
<input id="allow" type="checkbox" name = "selectInput"/>
</label>
<label for="allow">Выбор:</label>
<select id="select" disabled>
<option value="Да" name = "selectInput">Да</option>
<option value="Скорее да" name = "selectInput">Скорее да, чем нет</option>
<option value="Не выбрано" name = "selectInput" selected="selected">Не выбрано</option>
<option value="Скорее нет" name = "selectInput">Скорее нет, чем да</option>
<option value="Нет" name = "selectInput">Нет</option>
</select>
</div>
</div>
<legend>Комментарии</legend>
<textarea id="area" cols = "100" rows="5" name = "commentInput" value = "Без Комментария"></textarea><br>
<button class = "form_button" type = "submit">Отправить</button>
</div>
</form>
<div id="shim"></div>
<div id="msgbx">
<p>Ваше имя:</p><span id="valueName"></span><br>
<p>Год рождения:</p><span id="valueDate"></span><br>
<p>Интересы:</p><span id="valueInterest"></span><br>
<p>Знак:</p><span id="valueSign"></span><br>
<p>Жизнь:</p><span id="valueLife"></span><br>
<p>Ваш комментарий:</p><span id="valueComment"></span><br>
<button class = "window_button">Подтвердить</button>
</div>
</div>
<script src = "script.js"></script>
</div>
<div class = "info">
</div>
</div>
</body>
</html>
