JQuery: сохранить динамическую форму со значениями и перезагрузить на кнопку назад

Question

JQuery: сохранить динамическую форму со значениями и перезагрузить на кнопку назад

Я гуглил и искал на SO довольно много для этой уникальной проблемы, но не нашел своего точного решения.

У меня есть базовая форма с количеством входов X. В какой-то момент в форме, пользователь как свобода добавлять входы с помощью нажатия кнопки при необходимости. Когда они отправляют форму, она переходит на другую страницу, чтобы собрать опубликованные данные формы, но я хочу, чтобы пользователь мог нажать «Назад» (или отправить их обратно программно), если отправка не удалась.

У меня есть настройка проверки ошибок перед отправкой через javascript, но есть и другие вещи (например, почтовая программа PHP), которые могут не работать, и я хочу, чтобы они могли повторно отправлять свои данные.

Проблема, конечно, в том, что когда браузер щелкает назад, он — в лучшем случае — обновляет исходную форму, которая была в DOM с входными данными, но я теряю все динамически добавленные входные данные.

Я хочу захватить форму / данные в сеансе и заставить его заполнить DOM представленной версией, созданной пользователем при нажатии на кнопку назад.

Самое близкое, что я приехал, делает что-то вроде этого на SUBMIT:

var theForm = $('#myForm');
sessionStorage.setItem('formData', JSON.stringify(theForm.clone(true).html().toString());

И это на постбэк / клик назад:

$('#myForm').replaceWith(JSON.parse(sessionStorage.getItem("formData")));

Проблема здесь в том, что я получаю свою форму, но не данные! Нужно ли повторять каждый вход, чтобы вернуть мои данные в воссозданную форму? Почему это не захватывает данные, когда .clone(true)ред?

1

dom forms html5 jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вот ответ, который я в итоге получил на работу.

После проверки формы я установил сеанс для хранения данных формы следующим образом:

    var theForm = $('#MyForm');
sessionStorage.setItem('formHTML', JSON.stringify(theForm.clone(true).html()));

theForm.find('input,select,textarea').each(function(){
sessionStorage.setItem(this.name,this.value);
});

Затем, когда DOM загружается снова, у меня есть это, которое проверяет сеанс и заполняет форму данными, если она существует:

  $(document).ready(function(){

if (sessionStorage.getItem("formHTML")) {
$('#MyForm').html($.parseJSON(sessionStorage.getItem("formHTML")));
}

$('#MyForm').find('input,select,textarea').each(function(i,elem){
var sessItem = elem.name, sessValue = '';
if (sessValue = sessionStorage.getItem(sessItem)) {
if(elem.type=='radio' && elem.value==sessValue){
alert(elem[i].type+' has value of "'+elem[i].value+'"');
$('[name='+sessItem+']')[i].prop('checked',true);
}
else if(elem.type=='textarea'){
alert(elem.type);
$('[name='+sessItem+']').val(sessValue);
}
else
{
$('[name='+sessItem+']').val(sessValue);
}
}

});
});

0