CODEWITHSUNDEEP
javascriptjqueryradio-button
AdamGIS
AdamGIS

Reputation: 25

Jquery selecting previous radio button value and not current?

I'm trying to get the current value of the selected radio button but it keeps getting the previous button and not current. You have to double click on it to get the current button.

I've looked at the previous answers but still can't figure it out please help, Thanks.

Code pen https://codepen.io/AdamChicago/pen/oNXZypq

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>D</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

  <button class="btn btn-dark" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
    BUTTON
  </button>
  <div class="collapse" id="collapseExample3">
    <div class="card card-body" style="background-color: rgb(65, 72, 78); border: none">
      <div id="SortBTNS" class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-outline-info">
          <input type="radio" name="options" id="SortPopular" value = "MostPopular" autocomplete="off"> Most Popular
        </label>
        <label class="btn btn-outline-info">
          <input type="radio" name="options" id="SortTop" value = "TopRated" autocomplete="off"> Top Rated
        </label>
        <label class="btn btn-outline-info">
          <input type="radio" name="options" id="SortTrending" value = "Trending" autocomplete="off"> Trending
        </label>
        <label class="btn btn-outline-info active">
          <input type="radio" name="options" id="SortAZ" value = "A-Z" autocomplete="off" chedcked> A - Z
        </label>
      </div>
    </div>
  </div>
</body>
<script>
  $('#SortBTNS').on('click', function() {
    console.log($('#SortBTNS label.active input').val())
  })
</script>
</html>

Upvotes: 1

Views: 192

Answers (1)

Reza Hashemi
Reza Hashemi

Reputation: 520

use this code instead

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>D</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <button class="btn btn-dark" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
      <i class="fas fa-sort"></i>
      </button>
      <div class="collapse" id="collapseExample3">
         <div class="card card-body" style="background-color: rgb(65, 72, 78); border: none">
            <div id="SortBTNS" class="btn-group btn-group-toggle" data-toggle="buttons">
               <label class="btn btn-outline-info">
               <input type="radio" name="options" id="SortPopular" value = "MostPopular" autocomplete="off"> Most Popular
               </label>
               <label class="btn btn-outline-info">
               <input type="radio" name="options" id="SortTop" value = "TopRated" autocomplete="off"> Top Rated
               </label>
               <label class="btn btn-outline-info">
               <input type="radio" name="options" id="SortTrending" value = "Trending" autocomplete="off"> Trending
               </label>
               <label class="btn btn-outline-info active">
               <input type="radio" name="options" id="SortAZ" value = "A-Z" autocomplete="off" chedcked> A - Z
               </label>
            </div>
         </div>
      </div>
   </body>
   <script>
      $('#SortBTNS').on('click', function(e) {
        console.log(e.target.children[0].value)
      
      })
   </script>
</html>

Upvotes: 2

Related Questions