CODEWITHSUNDEEP
javascriptjqueryhtml
micky
micky

Reputation: 317

How do I know which value is selected

I have this html:

 <p class="form-row " id="radio_xsdfYxsfWEx_field">
           <label>Radio</label>
           <label for="radio_xsdfYxsfWEx_Male" class="radio">
                <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
           <label for="radio_xsdfYxsfWEx_Female" class="radio">
                <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
    </p>

I need to know if the value selected is male or female. I could do by this but the like this but id is different

    jQuery("#radio_xsdfYxsfWEx_field").on('change', function(){
       var value = this.value;
       if( value === 'Female' ) { 
        alert('succcess');
     }
   });

If I could get the value through name it would be simpler like:

jQuery("radio_xsdfYxsfWEx").on('change', function(){
       var value = this.value;
       if( value === 'Female' ) { 
        alert('succcess');
     }
   });

But, both failed, What is appropriate way? Thanks!

Upvotes: 0

Views: 39

Answers (4)

brunnerh
brunnerh

Reputation: 184622

Attribute selectors and :checked help:

[...document.querySelectorAll("input")].forEach(e => e.addEventListener("change", () =>
    console.log(document.querySelector("[name=radio_xsdfYxsfWEx]:checked").value)
));
 <p class="form-row " id="radio_xsdfYxsfWEx_field">
       <label>Radio</label>
       <label for="radio_xsdfYxsfWEx_Male" class="radio">
            <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
       <label for="radio_xsdfYxsfWEx_Female" class="radio">
            <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>

(Furthermore, i believe that jQuery should never be used.)

Upvotes: 1

Abslen Char
Abslen Char

Reputation: 3135

That should work , you need to use the value of the target , the example is close to your code 

jQuery("#radio_xsdfYxsfWEx_field").on('change', function(e){
       if( e.target.value === 'Female' ) { 
        alert('succcess');
     }
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row " id="radio_xsdfYxsfWEx_field">
           <label>Radio</label>
           <label for="radio_xsdfYxsfWEx_Male" class="radio">
                <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
           <label for="radio_xsdfYxsfWEx_Female" class="radio">
                <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
    </p>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65796

Just get the .val() (value) of the group during the change event.

$("input[name='radio_xsdfYxsfWEx']").on("change", function(){
  let val = $(this).val(); // Get the value of the group
  
  // Do what you want with the value
  console.log(val);
  if(val === "Female") {
    alert("Success!");
  } else {
    alert("Failure");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="form-row " id="radio_xsdfYxsfWEx_field">
  <label for="radio_xsdfYxsfWEx_Male" class="radio">
  <input type="radio" class="input-radio um-field" value="Male" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Male">Male</label>
  <label for="radio_xsdfYxsfWEx_Female" class="radio">
  <input type="radio" class="input-radio um-field" value="Female" name="radio_xsdfYxsfWEx" id="radio_xsdfYxsfWEx_Female">Female</label>
</p>

Upvotes: 1

Sagar Jajoriya
Sagar Jajoriya

Reputation: 2375

You can get the cheked radio input value using this : $("input[name='radio_xsdfYxsfWEx']:checked").val();

Upvotes: 1

Related Questions