Tips on how to keep radio buttons selected when choosing another radio button option?

Hey there, I am experiencing an issue with two ratings fields on my page. When the first rating is checked and then I check the second one, the first one automatically gets unchecked. While this does not affect the value saved in the back-end, it's causing confusion for visitors as the stars disappear.

I'm wondering if there is a way in javascript or jQuery to ensure that once a field is checked, it remains checked?

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
    <input id="5-stars-1" type="radio" name="firstRate" value="5" />
    <label for="5-stars-1">5</label>
    <input id="4-stars-1" type="radio" name="firstRate" value="4" />
    <label for="4-stars-1">5</label>
</fieldset>

<fieldset class="rate2">
    <input id="5-stars-2" type="radio" name="secondRate" value="5" />
    <label for="5-stars-2">5</label>
    <input id="4-stars-2" type="radio" name="secondRate" value="4" />
    <label for="4-stars-2">5</label>
</fieldset>

Any suggestions or insights on how to tackle this issue would be greatly appreciated!

If you require further information or code snippets, please feel free to reach out!

Answer №1

Big shoutout to Rory and Sathish for helping me solve this issue!

I realized that radios are meant to be selected one at a time, so I switched to checkboxes and voila, problem solved!

Grateful for the assistance once again!

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

Exploring Node.js and Express routing: Strategies for managing client-side promises

I've been working on a routing issue with MongoDB where I'm having trouble retrieving data on the client side from the promise received via $resource. There's a button on the HTML page that triggers the following function on ng-click: $scop ...

Utilizing JSON data in JavaScript to populate a datatable

After receiving a JSON result from an AJAX jQuery call, I stored it in a variable and attempted to insert the JSON data into a datatable. However, instead of inserting the data from the variable as intended, the datatable is currently populated with JSON d ...

Successful Ajax response notification

I am new to using ajax and I want to implement a .post method with an if condition to notify the user of its success or failure. Here is my code for .post: $.post("ajaxRegistering.php",{ name: name, lastname: lastname, ...

SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS ...

I am interested in turning a div to complete a full 360-degree rotation

I am working on a layout where I have a square and inside it, a circle. The square is positioned absolutely and the circle is positioned relatively, centered within the square. However, when I rotate the circle using the rotate property, it loses its cente ...

Creating a PDF file from a series of images

I've implemented a function using the jsPDF library to generate a PDF from a list of images. The main task is to add these images to the PDF document. Here is the code snippet: const { allImgs } = useAppContext() const doc = new jsPDF(); const gener ...

Creating a personalized script in ReactJS: A step-by-step guide

If I have already built a component with Google Chart in ReactJS, and I want to implement a feature that allows the Legend to show/hide data using a JavaScript script provided here, how and where should I integrate this code to work with my chart? Here is ...

Tips for including a personalized CSS class in the datepicker control

Is there a method to incorporate a personalized css class title into the daterangepicker ? I want to utilize my custom styles based on my class title. For example, $('.dpick').daterangepicker( { customClass: 'my-css', // The class name ...

Integrating the frontend (HTML, CSS, and JavaScript) with the backend (Express server)

I've been trying to figure out the best way to connect the frontend and backend of a website, but I can't seem to find any clear answers online. Let's say you have a backend API with an endpoint that deletes a user's account when req ...

Receiving undefined properties in functional React components

Is it possible to pass the {requests} prop to the RequestRow component correctly, especially after the setRequests function is executed? The issue seems to be that when requests are initialized as undefined initially and then set with an asynchronously cal ...

CSS tricks for achieving a "flat extended shadow" effect on containers with minimal CSS code

I have created a "flat long shadow" effect based on Matt Lambert's tutorial. The code is quite lengthy, so I'm looking for ways to make it more concise without using SASS or other tools. body { background-color: #ddd; } div { min-height: 6 ...

select only a single element within a specific section/div

One of the challenges I'm facing on my HTML page is with a section that has a max width set by a container. The heading and two columns in this section are not floated, only the columns are floated left while the heading is center text aligned. This a ...

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

Tips for arranging various information into a unified column within an Antd Table

Is there a way to display multiple data elements in a single cell of an Ant Design table, as it currently only allows insertion of one data element? I am attempting to combine both the 'transactionType' and 'sourceNo' into a single cell ...

Transferring JSON data with jQuery to PHP for updating a text document

My current project involves sending a JSON object from my jQuery code to a PHP file on the server. The goal is to have the PHP file append this JSON object to a text file. The issue at hand: I am encountering difficulties with the PHP file. Despite sendi ...

Retrieving data arrays from response.json

I've been on a wild goose chase trying to solve this puzzling issue. RAWG has transitioned to using their own API instead of Rapid API for game reviews, and I'm in need of data for "Tom Clancy Rainbow Six Siege". Despite my efforts to convert t ...

Is it possible to include multiple eventTypes in a single function call?

I have created a function in my service which looks like this: public refresh(area: string) { this.eventEmitter.emit({ area }); } The area parameter is used to update all child components when triggered by a click event in the parent. // Child Comp ...

Get the HTML source code for a form that has been created using AngularJS

Can AngularJS be used to download a portion of code generated by a form? Insert the following code snippet: http://jsbin.com/nufixiwali/edit?html,js,output I am looking to generate an .html file that only includes the code generated after the html tag. ...

Is this included in the total number of reads?

Following my query with CollectionsGroup, I attempted to retrieve the information of the parent's parent like this: db.collectionGroup('teams').where('players', 'array-contains', currentUser.uid).get().then(function(snaps ...

What is the process for reading a TS file and dynamically updating code with fs in Node.js?

Currently, I am setting up a new project using the Yeoman generator. It successfully creates all the necessary directories and installs dependencies. However, after generating the files, my next step is to update a JavaScript class to match the appName. In ...