So erstellen Sie (JSON) localStorage für ein Formular (Jquery serialize)

Question

Ich muss 2 Eingabefelder erstellen, Textbereich mit einem Absenden-Button. Ich muss jQuery serialize array und JSON local storage verwenden. Nach dem Klicken auf den Submit-Button sollten die Felder für eine andere Verwendung leer sein und die geposteten Daten müssen unter dem "DivPrintValue" angezeigt werden (IMP: Sie müssen nach dem Absenden sauber und sauber auf der Seite erscheinen) und müssen auch nach dem Refresh gespeichert werden Die Seite. das ist, was ich bisher:

<div id="submitted"> 
    <h3>Submitted Ideas</h3> 
<div id="DivPrintValue"> 

</div> 
</div> 

<form id="titleForm"> 
    <h3>Add Idea</h3><br> 
    <input type="text" name="title" id="title" placeholder="Title" size="38" required /> 
    <br> 
    <textarea name="description" id="description" placeholder="description" cols="29" required oninvalid="this.setCustomValidity('write your message here!')"></textarea> 
    <br> 
    <input type="text" name="category" id="category" placeholder="category" size="38" /> 
    <br><br> 
    <input type="submit" value="add idea"> 
    </div> 
</form> 

local:

$(function() { 

// Array 
var myIdeas = []; 

function printToScreen(myValues) { 
    if (myIdeas.length > 0) { 
     $("#DivPrintValue").html(''); 
     myValues.forEach(function (item, index) { 
      item.forEach(function (itm, indx) { 
       $("#DivPrintValue").append(itm.name + " -" + itm.value + "<br>"); 
      }) 
     }) 
    } 
} 

//page load or refreash 
if (localStorage.getItem("ideas") !== null) { 
    var localValues = JSON.parse(localStorage.ideas); 
    if (myIdeas.length <= 0) { 
     myIdeas = localValues; 
    } 
    printToScreen(localValues); 
} 

$("#titleForm").submit(function (e) { 
e.preventDefault(); 

var formValues = $(this).serializeArray(); 

myIdeas.push(formValues); 

localStorage.setItem("ideas", JSON.stringify(myIdeas)); 

var myValues = JSON.parse(localStorage.ideas); 

printToScreen(myValues); 

this.reset(); 
}) 

}) 

Answer 1

Sie eine Variable erstellen könnte $(this).serializeArray() als Parameter JSON.stringify(), .append() Wert #submitted, Sollwert bei localStorage zu speichern, rufen .reset() Methode auf form Element

$("form").submit(function(e) { 
 
    e.preventDefault(); 
 
    // serialize `form` 
 
    var values = $(this).serializeArray(); 
 
    values.forEach(function(item, index) { 
 
    $("#submitted").append(item.name + " " + item.value + "<br>"); 
 
    }) 
 

 
    // reset `form` 
 
    this.reset(); 
 
    // set `values` at `localStorage` 
 
    // if (!localStorage.form) 
 
    localStorage.setItem("form", JSON.stringify(values)) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="submitted"> 
 
    <h3>Submitted Ideas</h3> 
 
</div> 
 

 
<form id="titleForm"> 
 

 
    <h3>Add Idea</h3> 
 
    <br> 
 
    <input type="text" name="title" id="title" placeholder="Title" size="38" required /> 
 
    <br> 
 
    <textarea name="description" id="description" placeholder="description" cols="29" required oninvalid="this.setCustomValidity('write your message here!')"></textarea> 
 
    <br> 
 
    <input type="text" name="category" id="category" placeholder="category" size="38" /> 
 
    <br> 
 
    <br> 
 
    <input type="submit" value="add idea"> 
 
</form>