Using Input Radio in Visualforce page with Apex Controller

Question

I am having trouble using apex:selectradio because of 508 compliance issues. The selectradio is creating html table tags with role="presentation" and the tool my client is using treats it as a layout table and not data table and fails to read the labels for the radio button.

The solution I have come up with is to use input type radio and pass the values to to controller, but I cannot fire submitSatisfactionComment method. Here is my code.

VisualForce Page:

<input type="radio" onclick="satisfactionComment"  name="satisfaction" value="1"> {!$Label.One}
        <apex:actionFunction name="satisfactionComment" action="{!ctrl.submitSatisfactionComment}" rerender="myPanel"/>
    </input>
<input type="radio" onclick="satisfactionComment"  name="satisfaction" value="2"> {!$Label.Two} 
       <apex:actionFunction name="satisfactionComment" action="{!ctrl.submitSatisfactionComment}" rerender="myPanel"/>
    </input>

Apex Code:

public PageReference submitSatisfactionComment()
{
    //do something here with the selected value of the radio button
    return null;
}

Answer 1

I have never used action function before as a child of the inputs, usually just use action support

<input type="radio" name="satisfaction" value="1"> {!$Label.One}
        <apex:actionsupport event="onclick" action="{!ctrl.submitSatisfactionComment}" rerender="myPanel"/>
    </input>
<input type="radio" name="satisfaction" value="2"> {!$Label.Two} 
       <apex:actionsupport event="onclick" action="{!ctrl.submitSatisfactionComment}" rerender="myPanel"/>
    </input>

If you want to keep the action function, you are missing the () and can put the action functions in the form by themselves although it should work like you have it after you add the ()

<apex:form>
       <apex:actionFunction name="satisfactionComment" action="{!ctrl.submitSatisfactionComment}" rerender="myPanel"/>

<input type="radio" onclick="satisfactionComment();"  name="satisfaction" value="1"> {!$Label.One}
    </input>
<input type="radio" onclick="satisfactionComment();"  name="satisfaction" value="2"> {!$Label.Two} 
    </input>
</apex:form>

Now, how you pass the value? You can use merge fields if applicable instead of 1 or 2 or you can pass to the action function using the param tag...

<apex:form>
       <apex:actionFunction name="satisfactionComment" action="{!ctrl.submitSatisfactionComment}" rerender="myPanel">
           <apex:param value="" name="myParam" assignto="{!MYVAR}"/>
       </apex:actionfunction>

<input type="radio" onclick="satisfactionComment(this.value);"  name="satisfaction" value="1"> {!$Label.One}
    </input>
<input type="radio" onclick="satisfactionComment(this.value);"  name="satisfaction" value="2"> {!$Label.Two} 
    </input>
</apex:form>

Also, if using breaks 508 compliance you may want to open a case with SF support. Just a thought and not sure if applicable as I do not deal with 508 compliance so just throwing it out there.