Создание визарда с предпросмотром

143

17 ноября 2020, 21:10

Мне нужен пошаговый визард для редактирования модели. Остановился на jQuery Steps. Вопрос в следующем: есть требование заказчика на последнем шаге редактирования показать превью всех введенных данных чтобы типа клиент мог их посмотреть и вернуться если что-то захочет изменить. Подскажите как это сделать? Там нет такого примера... Как я понял данные на сервер отправляются в конце после всех шагов, а не после каждого? Значит наверное можно их как-то собрать все в кучу и сгенерировать превьюшку. Только не знаю как...

Answer 1

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> 
    <title>Title</title> 
    <style> 
        section { 
            display: none; 
        } 
    </style> 
</head> 
 
<body> 
    <div class="container"> 
        <form action="#" matod="POST"> 
            <section id="first"> 
                <div class="form-group"> 
                    <label for="Name">Имя</label> 
                    <input type="text" class="form-control" name="Name" id="Name" aria-describedby="helpId" 
                        autocomplete="off"> 
                </div> 
                <div class="form-group"> 
                    <label for="Surname">Фамилия</label> 
                    <input type="text" class="form-control" name="Surname" id="Surname" aria-describedby="helpId" 
                        autocomplete="off"> 
                </div> 
                <input type="button" class="nextBtn btn btn-success" value="Далее"> 
            </section> 
            <section id="second"> 
                <div class="form-group"> 
                    <label for="Age">Возраст</label> 
                    <input type="text" class="form-control" name="Age" id="Age" aria-describedby="helpId" 
                        autocomplete="off"> 
                </div> 
                <div class="form-group"> 
                    <label for="Tel">Телефон</label> 
                    <input type="text" class="form-control" name="Tel" id="Tel" aria-describedby="helpId" 
                        autocomplete="off"> 
                </div> 
                <input type="button" class="nextBtn btn btn-success" value="Далее"> 
            </section> 
            <section id="all"> 
                <div id="content"></div> 
                <button type="submit" class="btn btn-primary">Submit</button> 
            </section> 
        </form> 
    </div> 
 
    <script type="text/javascript"> 
        // массив с id секциями 
        let mass = ['first', 'second', 'all']; 
        // сюда заносятся информация с секцийй 
        let info = []; 
        // текущая секция 
        let currentPage = 0; 
        document.addEventListener('DOMContentLoaded', function () { 
            // показываю текущую секцию 
            $("section#" + mass[currentPage]).css("display", "block"); 
 
            // при клике на "Далее" 
            $(".nextBtn").click(function () { 
                // прячу текцщую секцию 
                $("section#" + mass[currentPage]).css("display", "none"); 
                // проверяю, последняя секция или нет 
                if (currentPage !== mass.length - 1) { 
                    // временный массив с инфой по секции 
                    let tempSectionValue = []; 
                    // заношу имя инпата и значения во временны массив  
                    $("section#" + mass[currentPage]).find("input:not([type=button])").each(function () { 
                        tempSectionValue.push({ "name": $(this).attr("name"), "value": $(this).val() }); 
                    }); 
                    // если сеции были уже заполнены 
                    if (info.length === mass.length - 1) { 
                        // ищу по id и изменяю 
                        info.forEach(section => { 
                            if (section.sectionId === currentPage){ 
                                section.sectionValue = tempSectionValue; 
                            } 
                        }); 
                    } 
                    // если нет то просто добавляю 
                    else { 
                        info.push({ "sectionId": currentPage, "sectionValue": tempSectionValue }); 
                    } 
 
                } 
                // следующая страница 
                currentPage++; 
                // если секция последняя 
                if (currentPage === mass.length - 1) { 
                    // временная строка, котороую потом вставлять буду 
                    let strAppend = ""; 
                    // чисщу прошлый контент 
                    $("#content").empty(); 
                    // добавляю информацию согласно массива 
                    info.forEach(function (section) { 
                        strAppend = ""; 
                        section.sectionValue.forEach(function (input) { 
                            strAppend += 
                                '<div class="row">' + 
                                '<label>' + input.name + '</lable>' + 
                                '<div>' + input.value + '</div>' + 
                                '</div>' 
                                ; 
                        }); 
                        $("#content").append( 
                            strAppend + 
                            '<input onclick="edit(' + section.sectionId + ')" class="btn btn-info" value="Изменить">' 
                        ); 
                    }); 
                } 
                // отображаю уже новую секцию 
                $("section#" + mass[currentPage]).css("display", "block"); 
            }); 
        }); 
 
        // для редактирования 
        function edit(id) { 
            $("section#" + mass[currentPage]).css("display", "none"); 
            currentPage = id; 
            $("section#" + mass[currentPage]).css("display", "block"); 
        } 
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> 
</body> 
 
</html>