Steps to store radio button selections in local storage

Question

Steps to store radio button selections in local storage

I have a quiz that includes radio buttons, and I need to save the answers on my local storage. However, I am currently stuck and unsure of what else to do. I am learning, so please don't be too hard on me. Thank you!

Here is the code I have written so far:

<form id="quiz"> </form>
    <script>

        let object;
        let httpRequest = new XMLHttpRequest(); 
        httpRequest.open("GET", "quiz.json", true);
        httpRequest.send();
        httpRequest.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
                object = JSON.parse(this.response);
                console.log(object)
            }
            let json = object

            let quiz = document.getElementById("quiz");
            let keyList = Object.keys(json.quiz);

            for (let i = 0; i < keyList.length; i++) {
                let key = keyList[i];
                let questionItem = json.quiz[key];
                let html = "<div>";
                html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
                html += "<div>";
                for (let i = 0; i < questionItem.options.length; i++) {
                    html += "<div >";
                    html += "<input type=\"radio\" id=\"q\" checked=\"checked\" name=\"qzz" + key + "_option\"  value=\"" + questionItem.options[i] + "\">" + questionItem.options[i] ;
                    html += "</div>";
                }

                quiz.innerHTML += html;
            }
            quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";       
 
function save() {
  
  var g1 = document.querySelector('input[type="radio]');
  g1 = (g1) ? g1.value : '';
  localStorage.setItem("g1", g1);
}
        });

javascript json local-storage

Answer 1

Answer №1

To simplify your AJAX dialog, try using fetch() instead of new XMLHttpRequest();. I have made some adjustments to your code (also refer to the comments in @brianagulo's answer) and created a sample set of data to showcase the quiz functionality. Note that the jsonplaceholder.typicode.com URL is just a placeholder for a working json-server endpoint and the received data is not utilized here.

In your "production version," remember to uncomment the line:

localStorage.setItem("quiz", JSON.stringify(ans))

The selected answers are stored in an object using:

[...document.querySelectorAll('input[type=radio]:checked')].reduce((a,{name,value}) => (a[name]=value,a), {});

This code snippet:

Gathers all checked radio button inputs (

document.querySelectorAll('input[type=radio]:checked')

),

Converts the DOM element collection into an array (using [... ]), and finally
Reduces the elements into an object where the element names become property names and the values are property values.

Remember that you can only store strings in local storage. That's why the ans object is converted into a JSON string before using it with .setItem().

const Q = {
  quiz: [{
    question: "Where was the Boston tea party?",
    options: ["New York", "Detroit", "Boston", "Reno"]
  }, {
    question: "Where would you find Venice Beach?",
    options: ["Detroit", "Venice", "Paris", "Los Angeles"]
  }, {
    question: "Where would you find Queens?",
    options: ["London", "Paris", "Stockholm", "New York"]
  }, {
    question: "Where is Greenwich Village?",
    options: ["London", "Paris", "Stockholm", "New York"]
  }, {
    question: "Where would you find the Gateway Arch?",
    options: ["St. Quentin", "St. Louis", "St. Anton", "San Francisco"]
  }]
}, quiz = document.getElementById("quiz");
var url = "quiz.json";
// In your live application: Uncomment the following line
url = "https://jsonplaceholder.typicode.com/users/7"; // Working test URL for fetch

function save(ev) {
  ev.preventDefault();
  const ans = [...document.querySelectorAll('input[type=radio]:checked')].reduce((a,{name,value}) =>(a[name] = value, a), {});
  // Local storage cannot be used in Stack Overflow snippets, so here is console.log instead:
  console.log(ans);
  // In your live application: Uncomment the following line
  // localStorage.setItem("quiz",JSON.stringify(ans))
}
fetch(url).then(r=>r.json()).then(object=>{
  // Remove the next line:
  object = Q; // Use the static quiz defined in Q instead ...

  let json = object;
  let keyList = Object.keys(json.quiz);

  for (let i = 0; i < keyList.length; i++) {
    let key = keyList[i];
    let questionItem = json.quiz[key];
    let html = "<div>";
    html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
    html += "<div>";
    for (let i = 0; i < questionItem.options.length; i++) {
      html += "<label>";
      html += "<input type=\"radio\" id=\"q\" name=\"qzz" + key + "_option\"  value=\"" + questionItem.options[i] + "\"> " + questionItem.options[i];
      html += "</label><br>";
    }

    quiz.innerHTML += html;
  }
  quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";
  quiz.onsubmit = save;
});

<form id="quiz"> </form>

Answer 2

To simplify your AJAX dialog, try using fetch() instead of new XMLHttpRequest();. I have made some adjustments to your code (also refer to the comments in @brianagulo's answer) and created a sample set of data to showcase the quiz functionality. Note that the jsonplaceholder.typicode.com URL is just a placeholder for a working json-server endpoint and the received data is not utilized here.

In your "production version," remember to uncomment the line:

localStorage.setItem("quiz", JSON.stringify(ans))

The selected answers are stored in an object using:

[...document.querySelectorAll('input[type=radio]:checked')].reduce((a,{name,value}) => (a[name]=value,a), {});

This code snippet:

Gathers all checked radio button inputs (

document.querySelectorAll('input[type=radio]:checked')

),

Converts the DOM element collection into an array (using [... ]), and finally
Reduces the elements into an object where the element names become property names and the values are property values.

Remember that you can only store strings in local storage. That's why the ans object is converted into a JSON string before using it with .setItem().

const Q = {
  quiz: [{
    question: "Where was the Boston tea party?",
    options: ["New York", "Detroit", "Boston", "Reno"]
  }, {
    question: "Where would you find Venice Beach?",
    options: ["Detroit", "Venice", "Paris", "Los Angeles"]
  }, {
    question: "Where would you find Queens?",
    options: ["London", "Paris", "Stockholm", "New York"]
  }, {
    question: "Where is Greenwich Village?",
    options: ["London", "Paris", "Stockholm", "New York"]
  }, {
    question: "Where would you find the Gateway Arch?",
    options: ["St. Quentin", "St. Louis", "St. Anton", "San Francisco"]
  }]
}, quiz = document.getElementById("quiz");
var url = "quiz.json";
// In your live application: Uncomment the following line
url = "https://jsonplaceholder.typicode.com/users/7"; // Working test URL for fetch

function save(ev) {
  ev.preventDefault();
  const ans = [...document.querySelectorAll('input[type=radio]:checked')].reduce((a,{name,value}) =>(a[name] = value, a), {});
  // Local storage cannot be used in Stack Overflow snippets, so here is console.log instead:
  console.log(ans);
  // In your live application: Uncomment the following line
  // localStorage.setItem("quiz",JSON.stringify(ans))
}
fetch(url).then(r=>r.json()).then(object=>{
  // Remove the next line:
  object = Q; // Use the static quiz defined in Q instead ...

  let json = object;
  let keyList = Object.keys(json.quiz);

  for (let i = 0; i < keyList.length; i++) {
    let key = keyList[i];
    let questionItem = json.quiz[key];
    let html = "<div>";
    html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
    html += "<div>";
    for (let i = 0; i < questionItem.options.length; i++) {
      html += "<label>";
      html += "<input type=\"radio\" id=\"q\" name=\"qzz" + key + "_option\"  value=\"" + questionItem.options[i] + "\"> " + questionItem.options[i];
      html += "</label><br>";
    }

    quiz.innerHTML += html;
  }
  quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";
  quiz.onsubmit = save;
});

<form id="quiz"> </form>

Answer 3

Answer №2

There seems to be an error in your save function. It appears that you are missing a quotation mark after radio:

var g1 = document.querySelector('input[type="radio"]');

Furthermore, your question is a bit unclear. However, if you are attempting to determine whether the radio button is checked or not, you should access the checked property and save it to localStorage. If you want to save the state for all buttons, consider using querySelectorAll. See example below for accessing a single input's checked value:

function save() {
  // you can directly access it on this line
  var g1 = document.querySelector('input[type="radio]').checked;
  localStorage.setItem("g1", g1);
}

Lastly, it seems like you are not calling the save() function. If your intention is to store the radios' checked state in localStorage when clicked, you might want to add an event listener to the submit button. Here's an example:

<form id="quiz"> </form>
    <script>

        let object;
        let httpRequest = new XMLHttpRequest(); 
        httpRequest.open("GET", "quiz.json", true);
        httpRequest.send();
        httpRequest.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
                object = JSON.parse(this.response);
                console.log(object)
            }
            let json = object

            let quiz = document.getElementById("quiz");
            let keyList = Object.keys(json.quiz);

            for (let i = 0; i < keyList.length; i++) {
                let key = keyList[i];
                let questionItem = json.quiz[key];
                let html = "<div>";
                html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
                html += "<div>";
                for (let i = 0; i < questionItem.options.length; i++) {
                    html += "<div >";
                    html += "<input type=\"radio\" id=\"q\" checked=\"checked\" name=\"qzz" + key + "_option\"  value=\"" + questionItem.options[i] + "\">" + questionItem.options[i] ;
                    html += "</div>";
                }

                quiz.innerHTML += html;
            }
            quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";       
 
function save() {
  // you can directly access it on this line
  var g1 = document.querySelector('input[type="radio]').checked;
  localStorage.setItem("g1", g1);
}

let submitButton = document.querySelector('input[type="submit"]');
submitButton.onclick = (event) => {
  /* this prevents page refresh and submission to the backend which is a form default */
  event.preventDefault();
  // then we call the save function here
  save();
};

});

If this resolved your issue, please consider marking it as the answer.

Answer 4

There seems to be an error in your save function. It appears that you are missing a quotation mark after radio:

var g1 = document.querySelector('input[type="radio"]');

Furthermore, your question is a bit unclear. However, if you are attempting to determine whether the radio button is checked or not, you should access the checked property and save it to localStorage. If you want to save the state for all buttons, consider using querySelectorAll. See example below for accessing a single input's checked value:

function save() {
  // you can directly access it on this line
  var g1 = document.querySelector('input[type="radio]').checked;
  localStorage.setItem("g1", g1);
}

Lastly, it seems like you are not calling the save() function. If your intention is to store the radios' checked state in localStorage when clicked, you might want to add an event listener to the submit button. Here's an example:

<form id="quiz"> </form>
    <script>

        let object;
        let httpRequest = new XMLHttpRequest(); 
        httpRequest.open("GET", "quiz.json", true);
        httpRequest.send();
        httpRequest.addEventListener("readystatechange", function () {
        if (this.readyState === this.DONE) {
                object = JSON.parse(this.response);
                console.log(object)
            }
            let json = object

            let quiz = document.getElementById("quiz");
            let keyList = Object.keys(json.quiz);

            for (let i = 0; i < keyList.length; i++) {
                let key = keyList[i];
                let questionItem = json.quiz[key];
                let html = "<div>";
                html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
                html += "<div>";
                for (let i = 0; i < questionItem.options.length; i++) {
                    html += "<div >";
                    html += "<input type=\"radio\" id=\"q\" checked=\"checked\" name=\"qzz" + key + "_option\"  value=\"" + questionItem.options[i] + "\">" + questionItem.options[i] ;
                    html += "</div>";
                }

                quiz.innerHTML += html;
            }
            quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";       
 
function save() {
  // you can directly access it on this line
  var g1 = document.querySelector('input[type="radio]').checked;
  localStorage.setItem("g1", g1);
}

let submitButton = document.querySelector('input[type="submit"]');
submitButton.onclick = (event) => {
  /* this prevents page refresh and submission to the backend which is a form default */
  event.preventDefault();
  // then we call the save function here
  save();
};

});

If this resolved your issue, please consider marking it as the answer.

Steps to store radio button selections in local storage

Answer №1

Answer №2

Similar questions

Dynamically transcluding multiple elements in Angular

Preserving state during navigation and router refresh in Next.js version 13

Tips for concealing the Google Chrome status bar from appearing on a webpage

The images in the React slick carousel appear to be slightly out of

Tips for transferring an entire array to a servlet and retrieving it efficiently

Perform an action when a button is clicked in a VueJs single-page application

How can I adjust the number of columns displayed per page on a Bootstrap Studio website?

When copying text from React-PDF Display, the values may appear altered or varied

Exploring nested elements in MongoDB with the help of Node.js API

Having trouble sending a post request to the /register endpoint

Await that's locked within a solo asynchronous function

Making a POST request with C++ using the Casablanca library

How to extract data-bound value from a <span> element using Angular

Sorting customization within a complex nested array structure

Dealing with issues of toggling visibility with jQuery when using a dropdown menu

Animating back with a jQuery if statement

Nested loop combining Callback and Promise with two API requests

Guide on inserting a MUI datepicker string value into the object state

Troubleshooting the "@material-ui/core" issue in React: Step-by-step guide

A step-by-step guide to accessing Chrome performance metrics using JavaScript