CODEWITHSUNDEEP
javascriptjquery
user2828442
user2828442

Reputation: 2515

Radio button always returning "yes" value

Using simple radio button, if I select yes or no option, it always calls the yes option.

Below is my code:

$('input:radio[name="selectlinktype"]').change(function() {
  if ($('input:radio[name="selectlinktype"]').val() == 'Yes') {
    alert("yes");
    var dropdownval = $("#dropDownsub").val();
    target_element.removeAttr('href').attr('action', dropdownval);
  }

  if ($('input:radio[name="selectlinktype"]').val() == 'No') {
    alert("no");
    var dropdownval = $("#dropDownsub").val();
    // target_element.removeAttr('href');
    target_element.removeAttr('action').attr('href', $("#edit-link-url .url").val());
    $(event.target).attr("href", $("#edit-link-url .url").val());
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="int-link" name="selectlinktype" value="Yes" /> Yes
<input type="radio" id="href-link" name="selectlinktype" value="No" /> No

Select yes or no, it will always go inside yes condition, no condition is never fired. Where am I going wrong?

Upvotes: 1

Views: 1643

Answers (6)

Rahul Koshti
Rahul Koshti

Reputation: 186

 $('input:radio[name="selectlinktype"]').change(function(){
  var value = $(this).val();
  if(value == 'Yes'){
     alert("yes");
     var dropdownval = $("#dropDownsub").val();
     $(this).removeAttr('href').attr('action', dropdownval);
  } else if(value == 'No'){
   alert("no");
    var dropdownval = $("#dropDownsub").val();
   // target_element.removeAttr('href');
    $(this).removeAttr('action').attr('href',$("#edit-link-url .url").val() );
    $(this).attr("href" , $("#edit-link-url .url").val()); 
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="int-link"  name="selectlinktype" value="Yes" /> Yes
<input type="radio" id="href-link"  name="selectlinktype" value="No" /> No

Upvotes: 0

Mamun
Mamun

Reputation: 68943

Your current selector is matching both the radio buttons. Either use :checked as part of the selector or this to target the current radio:

$('input:radio[name="selectlinktype"]').change(function(e){
  console.clear();
  console.log(e.target);
  if($(this).val() == 'Yes'){
     alert("yes");
     //var dropdownval = $("#dropDownsub").val();
     //target_element.removeAttr('href').attr('action', dropdownval);
  }  
  else if($(this).val() == 'No'){
   alert("no");
    //var dropdownval = $("#dropDownsub").val();
    //target_element.removeAttr('href');
    //target_element.removeAttr('action').attr('href',$("#edit-link-url .url").val() );
    //$(event.target).attr("href" , $("#edit-link-url .url").val()); 
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="int-link"  name="selectlinktype" value="Yes" /> Yes
<input type="radio" id="href-link"  name="selectlinktype" value="No" /> No

Upvotes: 1

Rahul Koshti
Rahul Koshti

Reputation: 186

You can manage it with click event

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="int-link"  name="radio_name" value="Yes" /> Yes
<input type="radio" id="href-link"  name="radio_name" value="No" /> No

<script>
$('input:radio[name="radio_name"]').click(function(){
  var radio_val = $(this).val()
  if(radio_val == 'Yes'){
     alert("yes");
  }  
  else if(radio_val == 'No'){
   alert("no");
 }
});
</script>

Upvotes: 0

Amadan
Amadan

Reputation: 198334

input:radio[name="selectlinktype"] will select both of your inputs. Then .val() checks for value of the first one, which happens to be "yes" (due to value="yes").

You need to subselect the input by whether or not it is selected: input:radio[name="selectlinktype"]:checked

Alternately you can see what the target of the event was (because typically the change event would originate from the element that was just activated), so that a selector is not needed: use this or event.target.

Upvotes: 3

Justinas
Justinas

Reputation: 43479

You are selecting first element with name selectlinktype so it's always yes. Add :checked to your selector to select actual selected element.

$('input:radio[name="selectlinktype"]').change(function(){
  if($('input:radio[name="selectlinktype"]:checked').val() == 'Yes'){
     alert("yes");
     var dropdownval = $("#dropDownsub").val();
     target_element.removeAttr('href').attr('action', dropdownval);
  }
  
  if($('input:radio[name="selectlinktype"]:checked').val() == 'No'){
   alert("no");
    var dropdownval = $("#dropDownsub").val();
   // target_element.removeAttr('href');
    target_element.removeAttr('action').attr('href',$("#edit-link-url .url").val() );
    $(event.target).attr("href" , $("#edit-link-url .url").val()); 
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="int-link"  name="selectlinktype" value="Yes" /> Yes
  <input type="radio" id="href-link"  name="selectlinktype" value="No" /> No

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You are checking value of radio with name selectlinktype but you need to check radio button which is clicked and selected

Also, use if and else if block instead of two if. Use $(this) for target element, see below code

 $('input:radio[name="selectlinktype"]').change(function(){
  var value = $(this).val();
  if(value == 'Yes'){
     alert("yes");
     var dropdownval = $("#dropDownsub").val();
     $(this).removeAttr('href').attr('action', dropdownval);
  } else if(value == 'No'){
   alert("no");
    var dropdownval = $("#dropDownsub").val();
   // target_element.removeAttr('href');
    $(this).removeAttr('action').attr('href',$("#edit-link-url .url").val() );
    $(this).attr("href" , $("#edit-link-url .url").val()); 
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="int-link"  name="selectlinktype" value="Yes" /> Yes
<input type="radio" id="href-link"  name="selectlinktype" value="No" /> No

Upvotes: 1

Related Questions