CODEWITHSUNDEEP
javascriptlocal-storage
Alany
Alany

Reputation: 367

localStorage - Retrieve Checkbox Values

I'm working with a form (made with Bootstrap 4) and localStorage. I'm using it so i can use the form input values on another page. It works fine with the inputs, but in this form i also have checkboxes and i can't find how to do the following : i'd like to check which checkboxes are checked. For those that are checked, i'd like to add the checkbox label text in the localStorage to use it on my other page. How can i achieve this?

My html looks like this :

 <form role="form" id="form" data-toggle="validator">

    <div class="form-row">
      <div class="form-group col-md-12">
        <label for="inputAdresse">Adresse *</label>
        <input type="text" class="form-control places-autocomplete" name="inputAdresse" id="inputAdresse"
          required="required" placeholder="" value="" autocomplete=" address-line1" />
      </div>
    </div>

    <div class="form-row form-checks">
        <div class="form-group col-md-12 col-sm-6">
            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkAscenseur" name="check" value="Ascenseur">
            <label class="custom-control-label" for="checkAscenseur">Ascenseur</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkCave" name="check" value="Cave">
            <label class="custom-control-label" for="checkCave">Cave</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkParking" name="check" value="Parking">
            <label class="custom-control-label" for="checkParking">Parking</label>
            </div>
        </div>
    </div>
    <button class="nextBtn pull-right" type="submit" id="btn-submit">Submit</button>
</form>

For the input, i use the following javascript : 

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  window.location.href = "thank-you.html";
};

Upvotes: 0

Views: 569

Answers (2)

Nadine
Nadine

Reputation: 559

Here is the working DEMO of how to do what you need.

You need to use the checked property for checkboxes:

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);
  
  let checkAscenseur = document.getElementById('checkAscenseur');
  localStorage.setItem('checkAscenseur', checkAscenseur.checked);
  
  let checkCave = document.getElementById('checkCave');
  localStorage.setItem('checkCave', checkCave.checked);
  
  let checkParking = document.getElementById('checkParking');
  localStorage.setItem('checkParking', checkParking.checked);

  window.location.href = "thank-you.html";
};

UPD new code that saves data values instead of true/false: DEMO.

Upvotes: 1

Matthias M.
Matthias M.

Reputation: 1

You could also do it the following way (pretty much the same, but a bit more compact):

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  new Array(...document.getElementById('form').getElementsByClassName('custom-control-input')).forEach(cb => {
    localStorage.setItem(cb.id, cb.checked);
  }

  window.location.href = "thank-you.html";
}

I convert the HTMLCollection I get from the .getElementsByClassName(...) function to an array, which I can iterate over using .forEach(). If you want to store the values by their ids, this works fine :P

Upvotes: 0

Related Questions