How to create (JSON) localStorage for a (Jquery serialize) form

Question

I need to create 2 input boxes, text area with a submit button. I have to use jQuery serialize array and JSON local storage. After clicking the submit button, the fields should be empty for another use and the posted data need to be shown under the "DivPrintValue" (IMP: it needs appear neat and clean on the page after submitting) and it also needs be saved after refreshing the page. this is what I have so far:

<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>

localStorage:

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

})

the submitted data need to appear under "submitted idea" and stay there even after refreshing the page. — D. jam
– D. jam, Commented Mar 20, 2016 at 7:08

guest271314 · Accepted Answer · 2016-03-20 08:42:50Z

2

You could create a variable to store $(this).serializeArray() as parameter to JSON.stringify(), .append() value to #submitted, set value at localStorage, call .reset() method on 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>

edited Mar 20, 2016 at 8:42

answered Mar 20, 2016 at 7:34

guest271314

1

Sign up to request clarification or add additional context in comments.

10 Comments

guest271314 Over a year ago

What do you mean by "like posted comments." ? form should be reset to initial values after calling this.reset()

D. jam Over a year ago

But it needs to appear without those commas and braces and should be saved on the page after refreshing. And the form keeps submitting if though it's empty. should look like this after submitting: Title: Read book next line description: blah blah and next line category: .....

guest271314 Over a year ago

You can loop through the result of $(this).serializeArray() to append name, value pairs to #submitted , without using JSON.stringify(), though use JSON.stringify() at setting object as string at localStorage . After page refresh, you can , again use JSON.parse() to parse string version of object from localStorage, loop through objects within array, and append name, value to #submitted. Not following "And the form keeps submitting if though it's empty. should look like this after submitting:" ? The form cannot be reset and retain values at the same time ?

D. jam Over a year ago

I tried to the way you have recommenced but I couldn't figure out. I clicked the submit button without entering values and it kept submitting "[{"name":"title","value":""},{"name":"description","value":""},{"name":"category","value":""}]" on and on.

guest271314 Over a year ago

"I clicked the submit button without entering values and it kept submitting "[{"name":"title","value":""},{"name":"description","value":""},{"name":"categor‌y","value":""}]" on and on" Yes, the values should be empty strings if no values are entered by user. Are you trying to use the values from a previously submitted form at submit event when no values have been entered by user ? Not certain what you are trying to achieve ?

|

Collectives™ on Stack Overflow

How to create (JSON) localStorage for a (Jquery serialize) form

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related