get checkbox values from form and add to JSON string using JavaScript

Question

attempting to pull form values and put them into localStorage via JSON string. This code works for everything but checkbox values. How do i also get checkbox values? Please and thanks!

<form id="myForm">
<input type="submit" name="submit" value="submitOrder"> 
</form>

const userOrder = {};

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

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

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

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

console.log(localStorage.getItem('userOrder'));

George · Accepted Answer · 2018-03-09 22:39:17Z

use the .checked attribute of a checkbox to tell if it is checked or not

const userOrder = {};
function getValues(e) {
  e.preventDefault();
  // turn form elements object into an array
  //you can also use Array.from(e.target.elements)
  var elements = Array.prototype.slice.call(e.target.elements);
  console.log(elements);
  // go over the array storing input name & value pairs
  elements.forEach((el) => {
    if(el.type == "checkbox") {
      userOrder[el.name] = el.checked;
    }
  });
  console.log(userOrder);
  // finally save to localStorage
  //localStorage.setItem('userOrder', JSON.stringify(userOrder));
}  

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

//console.log(localStorage.getItem('userOrder'));

<form id="myForm">
<input type="checkbox" name="checkbox-0"> 
<input type="checkbox" name="checkbox-1"> 
<input type="checkbox" name="checkbox-2"> 
<input type="submit" name="submit" value="submitOrder"> 
</form>

Jorge Zuverza · Accepted Answer · 2018-03-12 20:00:03Z

1

You can use JQuery serialize() function. Then, you can do something like this:

function onSubmit( form ){
  var data = JSON.stringify( $(form).serializeArray() ); //  <-----------

  console.log( data );

  return false;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit='return onSubmit(this)'>
  <input name='user' placeholder='user'><br>
  <input name='password' type='password' placeholder='password'><br>
  <input type='checkbox' name='remember-me'>
  <br />
  <button type='submit'>Try</button>
</form>

edited Mar 12, 2018 at 20:00

answered Mar 9, 2018 at 22:37

Jorge Zuverza

9158 silver badges28 bronze badges

Collectives™ on Stack Overflow

get checkbox values from form and add to JSON string using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related