Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2020, 05:26
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

Вывод результата в массив.
Доброе утро всем!
Я в программировании новичок, так что многих вещей еще совсем не понимаю.
Вот смотрите, есть 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>
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2020, 07:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,587

опросник последовательный вывод вопросов из базы данных
Малик,
не плодите однотипные темы, пишите в одной и той же!!!
<!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>

Последний раз редактировалось рони, 13.02.2020 в 08:44.
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2020, 08:23
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

рони,
Извиняюсь, уже сделал по-другому все, просто не знаю можно ли удалять созданные тмы, но появился такой вопрос: Внизу я приложил 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>
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2020, 08:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,587

Малик,
отправить результат на сервер и вернуть в необходимом виде
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2020, 08:37
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

рони,
Просто вы в своем коде, который вы написали до этого в этой теме, у вас результат как json строка потом появился отдельно на странице, а не как alert.
Заранее благодарю.
Ответить с цитированием
  #6 (permalink)  
Старый 13.02.2020, 08:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,587

Малик,
так предусмотрите некий блок, скройте форму и выведите результат в этот блок, зачем вам ещё страница отдельно?
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2020, 08:45
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

рони,
Вот именно это и хотел у вас узнать, если я создам блок и скрою его, как потом туда поместить данные массива, вместо alert надо что то другое использовать?
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2020, 08:45
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

рони,
Еще раз извиняюсь за то что достаю, просто я еще совсем зеленый во всем этом, поэтому потихоньку пытаюсь понимать
Ответить с цитированием
  #9 (permalink)  
Старый 13.02.2020, 08:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,587

Малик,
Сообщение от рони
this.parentNode.innerHTML
<div><button type="submit" class="btn btn-primary">Ответить</button></div>

в данном случае использован блок в котором была кнопка.
кнопка "стёрта" результатом

читать по теме
Изменение документа
Ответить с цитированием
  #10 (permalink)  
Старый 13.02.2020, 08:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,587

Сообщение от Малик
вместо alert надо что то другое использовать?
innerHTML или append или insertAdjacentHTML, читать по ссылке выше
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход между формами, с выводом единого результата в финальный массив. Малик Общие вопросы Javascript 4 12.02.2020 13:11
Как сделать вывод результата используя событие Focus? Noriz Общие вопросы Javascript 1 20.05.2017 16:16
Вывод результата в текстовом поле Remca Общие вопросы Javascript 0 02.05.2016 18:22
Вывод результата столбиком? olegalimov Events/DOM/Window 3 04.12.2015 08:34
Суммирование элементов и вывод результата Adverterio Элементы интерфейса 3 26.11.2015 15:36