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

Question

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

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

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

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

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

Ближайший я пришел делает что-то вроде этого на ВВЕСТИ:

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

И это на постбэка/нажмите назад:

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

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

Answer 1

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

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

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); 
       } 
      } 

     }); 
    });