Вывод результата в массив.
Доброе утро всем!
Я в программировании новичок, так что многих вещей еще совсем не понимаю. Вот смотрите, есть html со скриптом для теста, где каждый вопрос появляется по очереди за предыдущим. Нужно чтобы после ответа на последний вопрос, результат этого теста выводился в массив results в формате JSON- строки. Как это сделать не подскажите? Вот HTML:
<body>
<form id="vote" action="#" method="POST">
<div id="content">
<div class="pattern form-5 form-group">
<label class="question form-group ">{% question %}</label><br>
<div class="answers"><br><br>
<div class="checkbox custom-control custom-checkbox form-control"><label><input type="checkbox" name="poll" value="{% answer.value %}">{% answer.title %}</label></div>
</div>
</div>
</div>
<div><button type="submit" class="btn btn-primary">Ответить</button></div>
</form>
</body>
<script>
const data = [{
"id": "1",
"question": "Какие языки программирования Вы используете?",
"answers": ["C#", "C++", "ASP.NET", "PHP"]
}, {
"id": "2",
"question": "С какими СУБД Вам приходилось работать?",
"answers": ["MS-SQL Server 2000-2012/T-SQL", "Oracle", "MySQL", "PostgreSQL"]
}, {
"id": "3",
"question": "С какими системами контроля версий Вы работали?",
"answers": ["GIT", "CVS", "Subverion", "Mercurial"]
}];
const content = document.getElementById('content');
const patternNode = content.querySelector('.pattern');
patternNode.classList.remove('pattern');
const pattern = patternNode.outerHTML;
patternNode.parentNode.removeChild(patternNode);
data.forEach(function(question, index) {
content.insertAdjacentHTML('beforeEnd', pattern.replace(/{%\s?question\s?%}/gim, question.question));
const questionNode = content.lastChild;
questionNode.dataset.index = index;
questionNode.style.display = 'none';
const answers = questionNode.querySelector('.answers');
const answer = answers.querySelector('.checkbox').outerHTML;
answers.innerHTML = question.answers.map(function(title, value) {
return answer
.replace(/{%\s?answer.title\s?%}/gim, title)
.replace(/{%\s?answer.value\s?%}/gim, value);
}).join("\n");
});
let currentQuestionIndex = 0;
const questions = [].slice.call(content.querySelectorAll('[data-index]'));
questions[0].style.display = 'block';
document.querySelector('#vote [type="submit"]').addEventListener('click', function(e) {
questions[currentQuestionIndex].style.display = 'none';
if (++currentQuestionIndex >= questions.length)
return;
e.preventDefault();
questions[currentQuestionIndex].style.display = 'block';
});
</script>
|
опросник последовательный вывод вопросов из базы данных
Малик,
не плодите однотипные темы, пишите в одной и той же!!!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<form id="vote" action="#" method="POST">
<div id="content">
<div class="pattern form-5 form-group">
<label class="question form-group ">{% question %}</label><br>
<div class="answers"><br><br>
<div class="checkbox custom-control custom-checkbox form-control"><label><input type="checkbox" name="poll" value="{% answer.value %}">{% answer.title %}</label></div>
</div>
</div>
</div>
<div><button type="submit" class="btn btn-primary">Ответить</button></div>
</form>
</body>
<script>
const data = [{
"id": "1",
"question": "Какие языки программирования Вы используете?",
"answers": ["C#", "C++", "ASP.NET", "PHP"]
}, {
"id": "2",
"question": "С какими СУБД Вам приходилось работать?",
"answers": ["MS-SQL Server 2000-2012/T-SQL", "Oracle", "MySQL", "PostgreSQL"]
}, {
"id": "3",
"question": "С какими системами контроля версий Вы работали?",
"answers": ["GIT", "CVS", "Subverion", "Mercurial"]
}];
const content = document.getElementById('content');
const patternNode = content.querySelector('.pattern');
patternNode.classList.remove('pattern');
const pattern = patternNode.outerHTML;
patternNode.parentNode.removeChild(patternNode);
data.forEach(function(question, index) {
content.insertAdjacentHTML('beforeEnd', pattern.replace(/{%\s?question\s?%}/gim, question.question));
const questionNode = content.lastChild;
questionNode.dataset.index = index;
questionNode.style.display = 'none';
const answers = questionNode.querySelector('.answers');
const answer = answers.querySelector('.checkbox').outerHTML;
answers.innerHTML = question.answers.map(function(title, value) {
return answer
.replace(/{%\s?answer.title\s?%}/gim, title)
.replace(/{%\s?answer.value\s?%}/gim, value);
}).join("\n");
});
let currentQuestionIndex = 0;
const questions = [...content.querySelectorAll('[data-index]')];
questions[0].style.display = 'block';
document.querySelector('#vote [type="submit"]').addEventListener('click', function(e) {
e.preventDefault();
questions[currentQuestionIndex].style.display = 'none';
if (++currentQuestionIndex >= questions.length) {
const total = questions.map((el,k) => ({[data[k].id] : [...el.querySelectorAll('input[type="checkbox"]')].map(({checked},i) => checked ? data[k].answers[i] : "").filter(a => a)}))
this.parentNode.innerHTML = JSON.stringify(total, "", 4);
return false;
}
else questions[currentQuestionIndex].style.display = 'block';
});
</script>
</html>
|
рони,
Извиняюсь, уже сделал по-другому все, просто не знаю можно ли удалять созданные тмы, но появился такой вопрос: Внизу я приложил html, в нем все такая же форма, в конце 2 массива выводятся в объект и появляются на странице последнего вопроса. И теперь вопрос, можно ли сделать так чтобы данные этих результатов формы выводились не как alert, а также на странице, типа "Страницы Результативности"
<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()">
</div><br>
</form>
</body>
<script>
function convert_to_json() {
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
])
};
let json = JSON.stringify(results);
let json2 = JSON.stringify(profile)
alert("profile: " + json2 + "results: " + json);
}
</script>
|
Малик,
отправить результат на сервер и вернуть в необходимом виде |
рони,
Просто вы в своем коде, который вы написали до этого в этой теме, у вас результат как json строка потом появился отдельно на странице, а не как alert. Заранее благодарю. |
Малик,
так предусмотрите некий блок, скройте форму и выведите результат в этот блок, зачем вам ещё страница отдельно? |
рони,
Вот именно это и хотел у вас узнать, если я создам блок и скрою его, как потом туда поместить данные массива, вместо alert надо что то другое использовать? |
рони,
Еще раз извиняюсь за то что достаю, просто я еще совсем зеленый во всем этом, поэтому потихоньку пытаюсь понимать |
Малик,
Цитата:
в данном случае использован блок в котором была кнопка. кнопка "стёрта" результатом читать по теме Изменение документа |
Цитата:
|
| Часовой пояс GMT +3, время: 12:11. |