CODEWITHSUNDEEP
javascript
Corina
Corina

Reputation: 85

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

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'));

Upvotes: 0

Views: 2229

Answers (2)

Jorge Zuverza
Jorge Zuverza

Reputation: 915

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>

Upvotes: 1

George
George

Reputation: 2422

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>

Upvotes: 1

Related Questions