Сохранение всей структуры HTML со значениями и всеми - PullRequest
Новая
       34

Сохранение всей структуры HTML со значениями и всеми

1 голос
/ 11 октября 2019

Я пытаюсь сохранить некоторую html-структуру с выбранными значениями и всеми. 

<select id="select-options-beneficiaries" aria-describedby="selector2">
    <option selected value="Jhon Doe">Jhon Doe</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="New Beneficiary">New Beneficiary</option>
</select>

Я сохраняю этот кусок блока следующим образом: 

var htmlBeneficiariesData = document.getElementById('select-options-beneficiaries').innerHTML;
sessionStorage.setItem('htmlBeneficiariesData', htmlBeneficiariesData);

Теперь, когда я пытаюсьчтобы извлечь информацию и добавить ее, она не сохраняет выбранное значение или значения, сохраненные во входных данных. 

var sessionBeneficiariesData = sessionStorage.getItem('htmlBeneficiariesData');
$('#plan-beneficiaries-container').prepend(sessionBeneficiariesData);

Есть ли способ сохранить структуру HTML, включая выбранные значения и входные данные?

Зачем мне это нужно? Например, HTML создается с использованием JS, поэтому при нажатии кнопки создается новый HTML-код, подобный приведенному выше.

Таким образом, каждый раз, когда вы нажимаете на кнопку, генерируется новый выбор и ввод. После того, как вы закончили заполнять всю информацию из полей, созданных JS, вы переходите на следующую страницу, а затем, когда вы пытаетесь вернуться назад, информация (HTML и значения) теряется (потому что она была сгенерирована нажатиемкнопка) а почему так было сделано? Почему я не могу это изменить? потому что команда UX проектирует это так.

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Я не знаю, что у вас за проблемы;) Наверняка это можно сделать! Это ЯВАСЦРИПТ !!! Все возможно - даже, может быть, не все время ощущается полным. Это здесь сделает свое дело. Но наверняка это не элегантно и не рекомендуется. просто для удовольствия. 

            <!DOCTYPE HTML>
            <html>
                <head>
                    <title>Untitled</title>
                </head>
                <body>
                    <select id="select-options-beneficiaries" aria-describedby="selector2"  onchange="silly();">
                        <option selected value="Jhon Doe">Jhon Doe</option>
                        <option value="Jane Doe">Jane Doe</option>
                        <option value="New Beneficiary">New Beneficiary</option>
                    </select>
                   <br><br>
                    <textarea id="x" style="width:800px; height:200px;"></textarea>

                    <script>
                        function silly() {
                            value = document.getElementById("select-options-beneficiaries").value;
                            console.log(value);
                            options = document.getElementById("select-options-beneficiaries").childNodes;
                            var HTML = '<select id="select-options-beneficiaries" aria-describedby="selector2">\n';

                            for (i = 0; i < options.length; i++) {
                                var o = options[i].outerHTML;
                                if (o) {
                                    var test = 'value="' + value + '"';
                                    var x = o.indexOf(test);
                                    o = o.replace(' selected=""', '');
                                    if (o.indexOf(test) > -1) {

                                        o = o.replace('value="', 'selected ' + 'value="');
                                    }

                                    HTML = HTML + o + "\n"
                                }

                            }
                            HTML = HTML + "</select>"
                            sessionStorage.setItem('htmlBeneficiariesData', HTML);
                             document.getElementById("x").value=sessionStorage.getItem('htmlBeneficiariesData');

                        }
                    silly();  
                    </script>

                </body>
            </html>

, если вы хотите использовать свой код, этот код может сработать и после того, как ваш HTML-скрипт сначала добавит apiece перед сохранением, выберите выделение 

 value = document.getElementById("select-options-beneficiaries").value;

, а теперь добавьтекак строка для вашего innerHTML this 

 '<script>document.getElementById("select-options-beneficiaries").value="'+value+'";</script>\n"

Сначала вы накачаете HTML-код с неправильными настройками, а затем исправите его с помощью этого куска кода.

Обычный способ - просто сохранить всезначения формы и воссоздать все значения формы по сохраненным данным. Обычно хранится как объект json, а затем применяется javascript.

Здесь вы поместите всю свою форму, например, в объект URL. Я использую его для запросов POST для передачи данных формы. С decodeURIComponent вы получите значения обратно и сможете применить их все к вашей форме. Или измените компонент decodeURIC в соответствии с вашими потребностями. 

function serialize(form) {
                if (!form || form.nodeName !== "FORM") {
                    return;
                }
                var i, j, q = [];
                for (i = form.elements.length - 1; i >= 0; i = i - 1) {
                    if (form.elements[i].name === "") {
                        continue;
                    }
                    switch (form.elements[i].nodeName) {
                    case 'INPUT':
                        switch (form.elements[i].type) {
                        case 'text':
                        case 'tel':
                        case 'email':
                        case 'hidden':
                        case 'password':
                        case 'button':
                        case 'reset':
                        case 'submit':
                            q.push(form.elements[i].name + "=" + 
     encodeURIComponent(form.elements[i].value));
                            break;
                        case 'checkbox':
                        case 'radio':
                            if (form.elements[i].checked) {
                                q.push(form.elements[i].name + "=" + 
   encodeURIComponent(form.elements[i].value));
                            }
                            break;
                        }
                        break;
                    case 'file':
                        break;
                    case 'TEXTAREA':
                        q.push(form.elements[i].name + "=" + 
     encodeURIComponent(form.elements[i].value));
                        break;
                    case 'SELECT':
                        switch (form.elements[i].type) {
                        case 'select-one':
                            q.push(form.elements[i].name + "=" + 
       encodeURIComponent(form.elements[i].value));
                            break;
                        case 'select-multiple':
                            for (j = form.elements[i].options.length - 1; j >= 
       0; j = j - 1) {
                                if (form.elements[i].options[j].selected) {
                                    q.push(form.elements[i].name + "=" + 
       encodeURIComponent(form.elements[i].options[j].value));
                                }
                            }
                            break;
                        }
                        break;
                    case 'BUTTON':
                        switch (form.elements[i].type) {
                        case 'reset':
                        case 'submit':
                        case 'button':
                            q.push(form.elements[i].name + "=" + 
     encodeURIComponent(form.elements[i].value));
                            break;
                        }
                        break;
                    }
                }
                return q.join("&");
            }

Получайте удовольствие:)

0 голосов
/ 11 октября 2019

Я полностью согласен с комментариями @trincot, но я могу понять вашу ситуацию. Если я понимаю вашу проблему, я думаю, это то, что вы ищете: 

var htmlBeneficiariesData = document.getElementById('select-options-beneficiaries').innerHTML;
var htmlBeneficiariesDataSelected = document.getElementById('select-options-beneficiaries').selectedIndex; // get selected index
sessionStorage.setItem('htmlBeneficiariesData', htmlBeneficiariesData);
sessionStorage.setItem('htmlBeneficiariesDataSelected', htmlBeneficiariesDataSelected); // store selected index

var sessionBeneficiariesData = sessionStorage.getItem('htmlBeneficiariesData');
var sessionBeneficiariesDataSelected = sessionStorage.getItem('htmlBeneficiariesDataSelected'); // get selected index that was stored
document.querySelector('#plan-beneficiaries-container').innerHTML = sessionBeneficiariesData;
document.querySelector('#plan-beneficiaries-container').selectedIndex = sessionBeneficiariesDataSelected; // mark the selected index on the generated select
<p>Original</p>
<select id="select-options-beneficiaries" aria-describedby="selector2">
    <option selected value="Jhon Doe">Jhon Doe</option>
    <option value="Jane Doe">Jane Doe</option>
    <option value="New Beneficiary">New Beneficiary</option>
</select>
<hr />
<p>Generated</p>
<select id="plan-beneficiaries-container"></select>

Примечание: по соображениям безопасности это не будет работать с фрагментом кода, поэтому вы должны проверить его самостоятельно.

...