Why can't I get the status of this radio button in jquery?

Question

I have this piece of code from a salesforce visualforce page.

<div id="testId" class="row mb25 mt15">
    <div class="col-md-6 plr0">
        <p class="en">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
        <p class="fr">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
    </div>
    <div class="col-md-4 mt-5r">
        <apex:selectRadio id="innerTestId" value="{!client.Would_you_like_to_recieve_future_promo__c}" styleClass="radio">
            <div class="row">
                <div class="col-sm-6">
                    <div class="radio pa-cus">
                        <apex:selectOption itemLabel="Yes" itemValue="Yes"/>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="radio pa-cus">
                        <apex:selectOption itemLabel="No" itemValue="No"/>
                    </div>
                </div>
            </div>
        </apex:selectRadio>
    </div>
</div>

When the Submit button is clicked I need to have a JQuery script to check weather the radio button is selected Yes or No so that I can perform some custom validation. I call this function by adding onclick="validateInnerTestId();" to Submit button.

My problem is that I am unable to read/check whether the radio button is chosen Yes or No or True or False. If I can find out what state they are in then I can do my

Here is my goal

<script type="text/javascript">
<script>                                                                                 
    function validateInnerTestId()
    {
        if(innerTestId is Selected as Yes)
        {
            execute fucntionX()
        }
        else
        {
            execute functionY()
        }
    }
<script>

Here is some examples of how I have tried to read the value of the radio button:

alert($("#innerTestId").itemValue()); this line doesn't return anything

alert($("#innerTestId").val()); this line also doesn't return anything

and this if else always return no

if ($('innerTestId').is(':checked'))
{
    alert("yes");
}
else
{
    alert("no");
}

Does anyone has any idea on how to check for the radio button in this case? Thanks

Have you tried using `if ($('#innerTestId').is(':checked'))` instead? — Andrea Falzetti, Aug 31 '17 at 14:38
yes I tried that too, and it also always return `no` even when the radio button is selected Yes. — CB4, Aug 31 '17 at 14:42

score 2 · Answer 1 · 2017-09-05T16:29:34.690

As @Andrea mentioned in the comments, you simply forgot the # in your selector. There is a simple example below demonstrating the usage. If your code still isn't working we will need more info.

Are you sure validateInnerTestId() is being called?
How is it being called?

$('#doit').on('click',function() {
  var str = "";
  if ($('#test').is(':checked')) {
    str += "Toggle checked? YES\n"
  } else {
    str += "Toggle checked? NO\n"
  }
  
  
  if ($('#option1').is(':checked')) {
    str += "Option checked: 1";
  } else if ($('#option2').is(':checked')) {
    str += "Option checked: 2";
  } else {
    str += "Option checked: NONE";
  }
  
  alert(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="test" name="toggle" type="checkbox" value="" />
  <label for="toggle">Toggle</label>
</div>
<div>
  <input type="radio" id="option1" name="options" value="1">
  <label for="option1">Option 1</label>

  <input type="radio" id="option2" name="options" value="2">
  <label for="option1">Option 2</label>
</div>
<br />

<input id="doit" type="button" name="test" value="Tell me!" />

It might also be something to do with the ASP/SalesForce implementation? Perhaps some of the answers in this question might help: How to check if an option is selected?

thanks for your answer. but i have tried `if ($('#innerTestId').is(':checked'))` and it still returns `no` always — CB4, Aug 31 '17 at 14:55
I called the script method by adding this line to my Submit button click `onclick="validateInnerTestId();" ` And clearly this script method is executed because I can see the `alert` debug. — CB4, Aug 31 '17 at 15:48
I suspect it's because you're using some sort of Salesforce selectRadio component. Perhaps you could replace it with pure HTML radio such as here: http://jsfiddle.net/codingsolver/MsYqx/ — , Aug 31 '17 at 15:50
Added scenarios for checkbox **and** radio select. This shows how it works, but also demonstrates how your Salesforce radio inputs are different than native HTML. — , Sep 05 '17 at 16:30

score 1 · Answer 2 · answered Sep 05 '17 at 14:20

1

VF tags use dynamic ids, you should do following:

function validateInnerTestId(){
   if($('#{!component.innerTestId}').is(':checked')){
       execute fucntionX()
   }
   else{
       execute functionY()
   }
}

answered Sep 05 '17 at 14:20

Sarvesh Singhrour

26
4

Why can't I get the status of this radio button in jquery?

2 Answers2