How to send HTML form values to localstorage in JSON string using JavaScript

Question

what is the easiest way to retrieve form values to send to localStorage as a JSON string? I started a function with a for loop but am stuck..any nudges are greatly appreciated(still very new to this) No JQuery please. Thank you

 <input type="submit" name="submit" value="submitOrder" onclick="return getValues();">

var userOrder='';
function getValues(){
    for(var i=0; i < document.forms[0].length - 1; i++){
        console.log(document.forms[0][i]);
        return false;
    }
}    

localStorage.setItem('userOrder',JSON.stringify(userOrder));
console.log(localStorage.getItem('userOrder'));

linasmnew · Accepted Answer · 2018-03-09 20:33:50Z

4

You could do it like this:

html:

<form id="myform">
  <input type="text" name="test">
  <input type="submit" value="submitOrder">
</form>

js:

const userOrder = {};

function getValues(e) {
  // turn form elements object into an array
  const elements = Array.prototype.slice.call(e.target.elements);

  // go over the array storing input name & value pairs
  elements.forEach((el) => {
    if (el.type !== "submit") {
      userOrder[el.name] = el.value;
    }
  });

  // finally save to localStorage
  localStorage.setItem('userOrder', JSON.stringify(userOrder));
}  

document.getElementById("myform").addEventListener("submit", getValues);

answered Mar 9, 2018 at 20:33

linasmnew

3,9772 gold badges23 silver badges33 bronze badges

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

2 Comments

Jared Smith Over a year ago

And this is different from my answer...how?

linasmnew Over a year ago

@JaredSmith I don't know why you have an attitude here, but ok, I'm happy to let you know how it is different. First of all, I started writing it before your answer was submitted so I didn't see your answer until I submitted mine. Now as far as how it is different, 1. It only targets a single form (whereas yours targets every single form on the page) 2. It only stores input data (whereas yours also stores buttons) 3. I'd argue that it is more readable

Jared Smith · Accepted Answer · 2018-03-09 20:20:57Z

No need for jQuery. This uses ES 2015 syntax but if you need to support old browsers just run it through babel.

// Iterate over all the forms in the document as an array,
// the [...stuff] turns the nodelist into a real array
let userdata = [...document.forms].map(form => {
  // iterate over all the relevant elements in the form and
  // create key/value pairs for the name/object
  return [...form.elements].reduce((obj, el) => {
    // Every form control should have a name attribute
    obj[el.name] = el.value;
    return obj;
  }, {});
});

// convert the data object to a JSON string and store it
localStorage.setItem('userOrder', JSON.stringify(userdata));

// pull it pack out and parse it back into an object
let data = JSON.parse(localStorage.getItem('userOrder'));

If the forms all have ids (and they should) you could also use reduce in the outer layer instead of map and hash on the form id:

let userdata = [...document.forms].reduce((result, frm) => {
  result[frm.id] = [...frm.elements].reduce((obj, el) => {

and so on.

Collectives™ on Stack Overflow

How to send HTML form values to localstorage in JSON string using JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related