When resetting a form, the styled radio buttons remain selected and do not deselect

I have a set of three styled radio buttons for car rental pickup locations:

<div class="col-md-12 form-group">
<label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" value="la" required onfocus="dateCheck();">Los Angeles
    </a>
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" value="sf" onfocus="dateCheck();">San Francisco
    </a>
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" value="oc" onfocus="dateCheck();">Orange County
    </a>
</div>

</div>

Here is a screenshot of the styled radio buttons:

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

I am facing an issue where the radio buttons do not update when I reset the form or use JavaScript to check a different option. How can I resolve this issue?

Below is the code snippet of the radio buttons:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="col-md-12 form-group">
<label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" value="la" required onfocus="dateCheck();">Los Angeles
    </a>
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" value="sf" onfocus="dateCheck();">San Francisco
    </a>
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" value="oc" onfocus="dateCheck();">Orange County
    </a>
</div>

</div>

javascripthtmlcssbootstrap-4

Answer №1

It seems like you're asking about unchecking options in a form. Just submitting the form doesn't automatically uncheck the options, you have to manually do it. I hope this explanation helps!

Additional information: Upon further clarification from the OP, the issue lies with the parentNode anchor tag retaining the active css class, making it appear as if an option is still selected visually. To fix this, you can use the following code snippet:

resetGroup = (groupName) => {
  const group = document.getElementsByName(groupName);
  
  group.forEach(function(el) {
    el.checked = false;
    
    if (el.parentNode.classList.contains('active')) {
      el.parentNode.classList.remove('active');
    }
  });
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="col-md-12 form-group">
<label for="car-rental-pickup-location" class="mb-2">Pickup Location<small class="text-danger">*</small></label><br>
<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
    <a href="#tab-pickup" class=" btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-la" value="la" required>Los Angeles
    </a>
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-sf" value="sf">San Francisco
    </a>
    <a href="#tab-pickup" class="btn btn-outline-secondary flex-fill pudo" data-toggle="tab">
        <input type="radio" name="car-rental-pickup-location" id="car-rental-pickup-location-oc" value="oc">Orange County
    </a>
</div>

</div>
<button onclick="resetGroup('car-rental-pickup-location')">Reset Group</button>

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

the ever-changing dimensions of a PDF document

I'm attempting to display a PDF using an iframe, but I want the height of the viewer to match the document's height, meaning that all 3 pages should be visible without scrolling. How can I achieve this? Here's a simple example I created on ...

javascriptvue.jspdfvuejs2

Utilizing AngularJS's $http.get to fetch video IDs and then combining them with the /embed endpoint through the ng

Currently, I am utilizing $http.get to retrieve a list of videos from YouTube using the API endpoint 'MY_API_KEY'. The goal is to construct a link with the video ID in the format: "{{videoID}}". However, extracting the videoID proves to be chall ...

javascriptangularjsiframevideoyoutube

Exploring the efficacy of unit testing on Express controllers

After days of working on this, I've hit a wall and finally decided to ask for assistance. Everything runs smoothly when the server is up and API calls are made. However, when attempting to unit test the controller, I encounter some issues. I'm ...

javascriptnode.jsexpressunit-testinges6-modules

What is the reason behind my phone burger not working and how can I resolve the problem?

I am facing an issue with the burger menu icon on my website. When I click on the burger icon, it doesn't transform into a cross as intended. Even though I can see that the class .active is being added in the DOM, the menu doesn't respond to the ...

jquerycss

Moving Text Over a Static Background Image in HTML and CSS

Currently working on developing a website that involves coding in HTML and CSS. However, I've encountered an issue while programming. Whenever I attempt to adjust the positioning of my text, the background image shifts along with it, making it impossi ...

htmlcss

Using Typescript to replicate Object.defineProperties

Is there a way to emulate Object.defineProperties from JavaScript in Typescript? I am interested in achieving something similar using the syntax of Typescript: Object.defineProperties(someObject.prototype, { property: {get: function() { return v ...

javascripttypescript

Challenges with implementing ng2-auto-complete in Angular2

I successfully integrated the Angular 2 ng2-auto-complete component into my project by following this helpful tutorial. The code is also available on GitHub. The current challenge I am encountering involves the formatting of my data source. It is structur ...

javascripthtmlangular

Struggling with passing attributes to an AngularJS directive? You might be encountering the frustrating issue of receiving undefined values for

Currently, I am working on a directive that has four parameters being passed to it, all of which are bound to the directive scope. The problem I am facing is that despite the data existing and being loaded, the directive is receiving all values as undefin ...

javascriptangularjsangularjs-directiveangularjs-scope

SVGs appear at the forefront of all other elements

is where this issue is arising.... specifically in the date selection feature on the left side of the options panel. When using both Google Charts and Material Icons with the date picker component from https://github.com/nickeljew/react-month-picker, we a ...

htmlreactjssvggoogle-visualizationmaterial-ui

Store image selection in state

I am currently working on building an imagePicker in ReactNative, but I am running into an issue when trying to select the image. The error message I am receiving is: TypeError: this.setState is not a function. (In 'this.setState ({ avatar: data}) &a ...

javascriptreactjsreact-native

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

javascripthtmljsonangularjsangularjs-directive

Maximizing the potential of $urlRouterProvider.otherwise in angular js

I am encountering an issue with redirecting to the login screen when there is no UABGlobalAdminId in my storage. I have tried using $urlRouterProvider.otherwise but it doesn't seem to be functioning properly. When I attempt to debug, the console does ...

javascriptangularjsangularjs-routing

Error message is not shown by React Material UI OutlinedInput

Using React and material UI to show an outlined input. I can successfully display an error by setting the error prop to true, but I encountered a problem when trying to include a message using the helperText prop: <OutlinedInput margin="dense&quo ...

javascriptreactjstypescriptmaterial-ui

Ways to eliminate the vertical scroll feature in a kendo chart

I am encountering an issue while loading a kendo chart inside grid-stack.js where I am unable to resize the height properly. Whenever I decrease the height, a vertical scroll appears which should not happen. I have tried setting the height to auto and refr ...

javascriptjquerycsskendo-chartgridstack

Synchronizing live data from the database to the front end of a Java-powered web application

I'm currently developing a customer support web application using Java, where I need to display the status of "Customer Representatives (CR)" in the front-end - whether they are available, busy, or away on the phone. When a CR ends a call with a cust ...

javascriptjavamysqlajaxriak

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

I have a basic webpage showcasing a list of videos. Towards the bottom of the page, there is a button labeled "Load more". When a user clicks on this button, an HTTP request is triggered to add more data to the existing array of videos. Here is a simplifi ...

cssangulartwitter-bootstrapgoogle-chromebootstrap-4

What is the best way to handle an AJAX request within an if-else statement?

Attempting to utilize an if-else condition in order to make a jQuery Ajax call to an API. Having trouble understanding why the ajax function is being called even though it should be in the else statement. Below is the code snippet: if (e.value == null | ...

javascriptjqueryhtmlajax

I have a query related to material-ui 4, specifically the material-ui/pickers component that is reporting an error regarding a non-existent "mask" property

Recently, I upgraded a reactjs project that uses Material-UI (mui) from version 3 to version 4 by following the recommended migration guide. In the process, I also replaced material-ui-pickers 2.2.1 with @material-ui/pickers. However, after the upgrade, t ...

javascriptreactjsmaterial-ui

What is the best way to refresh a page using Vue 3 Composition API and router?

Once confirmed in Vue 3 Composition API router.push('/IssueList'); When arriving at the IssueList page, I want my issue-incoming and issue-send components to refresh. Although I am redirecting to the page, the IssueList page does not refresh. ...

javascriptvue.jsvue-routerprimevue