Why are the radio buttons failing to get selected for both questions?

I created a form with 2 questions using Bootstrap. The first question has 4 options, and the second question also has 4 options. I noticed that when I check an option in the first question and then proceed to check an option in the second question, the radio button selected in the first question gets unchecked. It seems like the checkboxes are dependent on the two different questions, but I'm not sure why this is happening.

index.html:

<form>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <h3>[Test]Contact us Survey Form</h3>  
        </div>
    </div>

    <div id="agegroup">
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <h4>What is your age group?</h4>  
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="radio">
                    <label><input type="radio" name="optradio"/> >=25 yrs</label>
                </div>
            </div>
        </div>
        
        (other radio button groups...)

    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <h4>What is your gender?</h4>  
        </div>
    </div>

    (other radio button groups...)
    
</form>

Screenshot:

https://i.sstatic.net/q8lXz.png

Answer №1

To ensure proper identification, assign unique names to each group.

For example, if you designate the first group with name="optradio", consider labeling the second group as name="optradio2".

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

Display SVG at full size without any distortion

How can I make the SVG image 100% by 100% without scaling? I want the image to be centered on the page both horizontally and vertically. The challenge is that I also want to display the areas outside of the SVG artboard, so using CSS to center it won&apos ...

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

Does .NET MVC provide the necessary separation of HTML/CSS/JS for my project?

Currently, I am collaborating with my ASP.NET development team in an effort to improve the quality of our HTML output. We are facing challenges due to ASP.NET's tendency to insert JavaScript directly into the page, creating dependencies on JS for form ...

ng-view displays unexpected behavior when used with bootstrap data tables

For the first time, I decided to utilize a pre-made template for my project. You can find the theme by following this link here. I've been facing an issue where the datatable from the theme doesn't load properly into the ng-view. Everyt ...

Submitting POST data from a form to the current page

I am facing a rather complex issue. Currently, on a page, I have a form that collects information from my visitors. With the help of a script, I can grab this information and add it to a specific link. Initially, I used redirect.php to attach the data to ...

Creating a responsive contact form using Javascript

I have a question regarding making a contact form responsive with javascript. I am still new to JavaScript, but I consider myself at a mid-level proficiency with HTML and CSS. The issue I am facing is that I recently registered with a third-party contact ...

Challenge involving CSS and Javascript for solving puzzles

In my attempt to create a puzzle with 2 rows and 3 columns using CSS and JavaScript, I envision the pieces of the puzzle being black and cut into various shapes. The objective is for users to drag these pieces onto the board in order to complete it. I have ...

Regular expression for selecting characters and numbers in jQuery using a selector

Can someone help me figure out how to select all IDs like this: r1 r2 r3 etc. and not the other IDs like helloWorld I attempted using the CSS selector with jQuery but I'm having trouble understanding how. I tried $('#r[0-9]') but it didn& ...

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

Tips for sending Form Data and additional information via AJAX

I'm struggling with sending HTML form data using AJAX while also trying to send additional data in the same POST call. Has anyone done this before? $('#HTMLConForm').on('submit', function (e) { e.preventDefault(); ...

Jquery ripple effect does not function properly with background-attachment: fixed style

Is there a way to make the effect ripples () work with background-attachment: fixed? I'm trying to achieve this effect while keeping the background fixed in place. Any suggestions on how to make this work? background-attachment: fixed; ...

Exploring the Possibilities of Personalizing Data Tables

I have a unique requirement that I need help with: 1. On the mobile site, only 5 records should load by default with paginated data for subsequent pages. and 2. In desktop view, the default should be 10 records loaded with paginated data for subsequent ...

Is there a way to increase the total of each row by two when a button is clicked?

Looking to enhance the sum of each row by two depending on whether a button is clicked. HTML: <table> <tr> <td> <input type="checkbox" class="prof" name="prof" value="0"> <input class=&quo ...

A minuscule variation in width percentage due to a single pixel

I am experiencing an issue with a one pixel margin between two green colors on my website. I have been unable to locate the source of this problem. I am currently using display:inline-block. Here is the link to my website: ...

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

Featuring a visual arrangement of categorized images with AngularJS for an interactive display

As I work on developing a web application with Angular, my goal is to create a grid layout that organizes items by category. Each row will represent a different category. Below is an example of the code structure I have in place: <ion-item ng-repeat="i ...

The alternative text for the oversized image exceeds the boundaries

After setting the width and height for an image, along with testing overflow:hidden, I've encountered an issue where the alt text for a broken image overflows the bounds of the image and the image size is lost. How can I contain the alt text within th ...

javascript include new attribute adjustment

I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

Issue with aligning items vertically using CSS and Javascript

I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fa ...