CODEWITHSUNDEEP
jqueryjson
D. jam
D. jam

Reputation: 31

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

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

})

Upvotes: 3

Views: 2551

Answers (1)

guest271314
guest271314

Reputation: 1

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>

Upvotes: 2

Related Questions