serializzazione e deserializzazione un modulo con il suo stato attuale

Question

ho questo modulo

<form id=my_form> 
    <input id=mt type=text><input id=mc type=checkbox><textarea id=mta /> 
</form> 

voglio avere un pulsante da qualche altra parte, che può serializzare il modulo con il suo stato, cioè, se la textarea ha un contenuto , o il testo ha un contenuto o la casella di controllo è premuta, voglio che le informazioni vengano memorizzate in qualche modo nella stringa. Più tardi, vorrei ripristinare le informazioni nel modulo usando quella stringa.

Ho provato con .innerHTML e non ha funzionato, ho sempre ottenuto l'HTML originale.

Ho anche esaminato il metodo serialize di jQuery, ma non è stato possibile deserializzare "all'interno" del modulo.

Grazie in anticipo!

Kurt

Answer 1

Ho fatto esempi per voi. Testato - funzionante bene.
È necessario jQuery biblioteca
Prima qui va il modulo:

<form id="my_form"> 
    <input id="formText" type="text" name="formText" /> 
    <br /> 
    <label><input id="formCheck" type="checkbox" name="formCheck" /> check 1</label> 
    <br /> 
    <label><input id="formCheck2" type="checkbox" name="formCheck2" /> check 2</label> 
    <br /> 
    <textarea name="formTextarea" id="formTextarea" cols="20" rows="3"></textarea> 
    <br /> 

    <label><strong>Time unit</strong>:</label> 
    <p> 
     <label><input type="radio" name="dataView" value="week" checked="checked" /> Week</label> 
     <label><input type="radio" name="dataView" value="month" /> Month</label> 
     <label><input type="radio" name="dataView" value="year" /> Year</label> 
    </p> 


    <input type="button" value="Serialize" onclick="serializeForm()" /> 
    <input type="button" value="Unserialize" onclick="restoreForm()" /> 

</form> 

Dopo aver cliccato pulsanti, funzioni corrispondenti sono chiamati a js
Ed ecco la JS:
dati serializzati vengono memorizzati nella variabile formData e, se necessario, è possibile memorizzarla nei cookie, nel database ecc. E successivamente caricarla, in base alle proprie esigenze

<script type="text/javascript"> 

    var formData;    

    function serializeForm() { 
     formData = $('#my_form').serialize(); 
    }   

    function restoreForm() { 
     var obj = unserializeFormData(formData); 

     // Restore items one by one 
     if(obj.hasOwnProperty('formTextarea')) { 
      $('#formTextarea').val(obj.formTextarea); 
     } 

     if(obj.hasOwnProperty('formText')) { 
      $('#formText').val(obj.formText); 
     } 

     // Radio buttons 
     if(obj.hasOwnProperty('dataView')) 
      $('input[value="'+obj.dataView+'"]').attr('checked', true); 


     // Restore all checkbox. You can also iterate all text fields and textareas together, because the have same principle for getting and setting values by jQuery 
     $('#my_form input[type="checkbox"]').each(function(){ 
      var checkName = $(this).attr('name'); 
      var isChecked = false; 
      if(obj.hasOwnProperty(checkName)) 
       isChecked = true; 
      $(this).attr('checked',isChecked); 
     }); 

    }    


    function unserializeFormData(data) { 
     var objs = [], temp; 
     var temps = data.split('&'); 

     for(var i = 0; i < temps.length; i++){ 
      temp = temps[i].split('='); 
      objs.push(temp[0]); 
      objs[temp[0]] = temp[1]; 
     } 
     return objs; 
    } 

</script> 

Answer 2

Da .serialize();:

l'elemento deve avere un attributo name.

quindi assicuratevi di dare a tutti gli ingressi di un name='whatever' e quindi utilizzare questo per ottenere i dati:

data = $('#my_form').serialize(); 

Ecco una demo: http://jsfiddle.net/CWJDj/1/