• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

175
Views
Radio button with different ids, different values, same name attribute

I got my radio Selector that looks like this

<div id="graph_selector" style="display:none; text-align: center;" >
   <p><b>Tipo de Grafico: </b></p>
     <div class="cc-selector">
        <input id="axes" type="radio" name="sel_graph" class="radio_selector" value="axes" />
        <label class="drinkcard-cc axes"for="axes"></label>
        <input id="activity" type="radio" name="sel_graph" class="radio_selector" value="activity" />
        <label class="drinkcard-cc activity" for="activity"></label>
        <input id="pie" type="radio" name="sel_graph" class="radio_selector" value="pie" />
        <label class="drinkcard-cc pie" for="pie"></label>
     </div>
</div>

A button to submit my selection

<button type="submit" class="btn btn-success" id="guardar_grafico">Graficar</button>

Im trying to get the right value on my js but when I use console.log(); all I get is the value from the 1st input= "axes" regardless of what I choose

<script type="text/javascript">    
$('#guardar_grafico').click(function() {
       var graph_selector = document.querySelector('input[name=sel_graph]').value
       console.log(graph_selector);
});

Any help would be appreciated

about 3 years ago · Santiago Gelvez
2 answers
Answer question

0

In order to get the value of the selected radio in a radio group, you need to look for the checked property on each radio.

In this example, it loops through all of the radios with that name="sel_graph" attribute, and filters that list to the 1 radio that is checked.

var graph_selector = Array.from(
    document.querySelectorAll('input[name=sel_graph]')
).filter(radio => radio.checked)[0]?.value;
console.log(graph_selector);

Also, I just realized you're using jQuery. There's a simpler solution with that, check this answer.

jQuery get value of selected radio button

about 3 years ago · Santiago Gelvez Report

0

nvm, solved the issue, I was missing the checked property on my js

it went from this

var graph_selector = document.querySelector('input[name=sel_graph]').value

to this

var graph_selector = document.querySelector('input[name=sel_graph]:checked').value
about 3 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error