Unable to transfer elements from an Array to reconstruct a form

Being a novice in JavaScript, I decided to challenge myself by attempting to restore a form using cookies when the page is closed or reloaded. Here are the steps I've taken:

  • Created an array with form selections
  • Converted it to a string
  • Set up a cookie
  • Retrieved the cookie
  • Extracted the string
  • Converted it back to an array

So far, everything was going smoothly. However, I encountered an issue at the next step...

  • Trying to pass the array values to restore the form elements

Despite having the correct form selections present in the retrieved array, whenever I reload the page, only the last radio button selected (even if I change the number of buttons) and all checkboxes are checked.

I have attempted various solutions to identify the error, even converting the "true"/"false" values to Booleans, but nothing seems to work.

This is how my code looks currently:

frm[0]=true
frm[1]=false // for two radio buttons
frm[2]=false
frm[3]=false // for two checkboxes
document.getElementById("myradio1").checked=frm[0]
document.getElementById("myradio2").checked=frm[1]
document.getElementById("mycheckbox1").checked=frm[2]
document.getElementById("mycheckbox2").checked=frm[3] // passing the array values to the form elements

Unfortunately, no matter what values I pass, only the last radio buttons and all checkboxes get selected.

While I understand that this code may not be following best practices in JavaScript, I would like to first comprehend why it is behaving like this before making any changes. Any insights or comments you can provide would be greatly appreciated as I am eager to resolve this issue.

Answer №1

The reason behind this issue is that radio buttons restrict selection to only one option within a group of choices.

Furthermore, when utilizing checkboxes, duplicating the same ID for multiple boxes prevents changes from being mirrored across all checkboxes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The last line is missing a trailing comma

I'm struggling to understand why my tslint insists on having a trailing comma at the end of the last line in the objects. Is there a way to configure the ignore rule for the last line of objects? Appreciate any help! For example: settings = { ...

Converting JavaScript code to jQuery and integrating it into a WordPress website has become a common practice

I recently developed a working javascript function as shown below: function calc(A,B,SUM) { var one = Number(A); var two = Number(document.getElementById(B).value); if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } if (isNaN(tw ...

The React app hosted on Firebase displays a message saying "please activate JavaScript to run this application"

I created a web app using React that is hosted on Firebase Hosting, with a backend server utilizing Express and Cloud Functions. You can access the website here: The landing, login, and signup pages are functioning properly. However, when trying to acces ...

Is there a way to ensure my function runs as soon as the page starts loading?

My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I&apo ...

Instructions for organizing a set of 5 elements into groups once all elements are filled

I am exploring a method to populate an integer array with a specified number of elements, adding them one by one. Once all spots in the array are filled, I want the elements to group together in the first available position and start over. For instance: ...

Animate the background image with a float effect using jQuery's timeout feature to create an up

I'm having an issue with a set of elements that have background images applied to them. Specifically, I want the planets in the images (all except the first one) to move slightly up and then back down to create a floating effect. In my jQuery code, I ...

What is the best way to confirm checkbox selection based on MySQL data?

Writing this question feels challenging, but I have a collection of checkboxes with their data stored as JSON in my PHP database. What I'm trying to achieve now is to dynamically load the JSON data on the page without refreshing it, checking specific ...

A clever solution for AJAX loading on the client side: bypassing Cross Origin requests error

My goal is to create a visual novel, "click" progression game using only HTML, CSS, and JS. The game should be able to run in the browser on the client side from index.html. I've been struggling with cross-origin requests for the past two weeks and c ...

Specify the minimum required spacing between two meshes in THREE.JS

I'm working on a code that generates clouds with random positions, rotations, and scales. However, sometimes these clouds can end up clipping together when they are generated close to each other or near another object. I want to set a minimum distance ...

Is it considered incorrect to include the re.send() function within the callback of mydb.collection().find().toArray()?

I am currently in the process of setting up a login page for my application. My goal is to send a file only after verifying that the login credentials provided by the user are correct. I have implemented a handler for a POST request which checks if the en ...

Display content exclusively within a modal specifically designed for mobile devices

I want to implement a feature where a button triggers a modal displaying content, but only on mobile devices. On desktop, the same content should be displayed in a div without the need for a button or modal. For instance: <div class="container&quo ...

Front-end displaying empty data fields on my webpage

I've been struggling to understand why my data isn't mapping correctly on these two components. I have attempted two debugging methods to analyze my code and have observed the data object for both the navigation and footer. Unable to comprehend ...

Allow the jQuery draggable function to only accept elements with a specific class

I am encountering issues with a particular piece of JavaScript/jQuery code: this.droppable = function(){ $('.imageWindow .body .item').draggable(); $('.groupWindow .body .item').droppable({ accept: $(".imageWindow .body .item") ...

Personalized picture carousel

Struggling to build my own simple image slider using javascript and it's not cooperating. I need it to cycle through three images. Check out my code: var counter = 1; setInterval(function animate() { var slideshows = document.getElementsByClassName ...

Executing a Python script to run the main.js and require.js files

Looking for assistance on executing JS files with Python code. For instance, transforming this HTML snippet: <script data-main="main.js" src="require.js"></script> into Python. ...

Attempting to access an index of type 'String' on a value of type 'String' is not allowed

Can anyone assist me with this issue I am facing? I want to display a name on a table view cell from an array called postFromFriends. However, when I attempt to access the name in the array, I receive an error stating "Cannot subscript a value of type &apo ...

I would like for the phone gallery to automatically open when a user clicks on the input field of the website

Currently, I am utilizing the following code: <input type="file" accept="image/x-png,image/jpeg"/> to accept an image. However, I have noticed that this input field displays different behaviors in various browsers. Sometimes it o ...

A guide to extracting the port number from the service name using Node.js

We are currently working on a WebSocket server using Nodejs in conjunction with socket.io. In the process, I utilized the createServer method from the HTTP class and proceeded to listen to a specific port like so: var server = http.createServer(); serv ...

Connecting with NodeJs client

I am a beginner with nodeJs and struggling to find a solution to my issue. I have a login interface where I want an alert to be displayed after the connection of two users. However, currently, the alert is always displayed before the second user logs in. H ...

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...