Getting radio button group values using only CSJS

Question

I've read a similarly entitled article but it didn't really provide a client sided solution.

I have a radio button group that will determine whether or not other things will be visible or hidden. I have code that will retrieve the value of this RBGroup in a xp:scriptBlock.

function getPTValue (bName) {
var pt=null;
for(var i=0; i<document.forms[0].elements.length; i++){
 if(document.forms[0].elements[i].name=="#{id:PayType}" ){
  if(document.forms[0].elements[i].checked == true){
   pt=document.forms[0].elements[i].value;
   break; //remove this if for check box groups and collect multiple values above instead
  }
 }
}
 return pt
}

Here is the radio button group;

<xp:radioGroup
 id="PayType" 
 value="#{FInvoiceDoc.PayType}" 
 defaultValue="Hourly" 
 style="color:rgb(0,0,0)">
 <xp:selectItem itemLabel="Hourly" itemValue="Hourly"> </xp:selectItem>
 <xp:selectItem itemLabel="Fixed" itemValue="Fixed"></xp:selectItem>
 <xp:eventHandler event="onclick" submit="true" refreshMode="norefresh">            
  <xp:this.script><![CDATA[payTypeVis();]]></xp:this.script>
 </xp:eventHandler>
</xp:radioGroup>

This works great while the document is in edit mode, but if I open it in readonly mode, the above routine gets executed, but doesn't return the value of the radio button group.

It appears that in read-mode, it shows the the payType radio-button group as a quasi-computed field. No buttons, just the value. I try retrieving it with a XSP.getElementById("#{id:payType}").innerHTML and I get the value but with lots of HTML tags around it. (.value returns nothing)

How do I properly retrieve a radio button group value on a document in read mode using strictly CSJS?

Answer 1

The value of the field will not change in read mode, so for handling it in read mode, set a CSJS variable using the Script Block control and pulling directly from the bound field. Script Block controls allow you to run SSJS / Java as well, so: var invDocPayType = "#{javascript:FInvoiceDoc.PayType}";

Set the rendered property so it only shows if the document is in read mode, so: if (view.isRenderingPhase()) !FInvoiceDoc.isEditable();

Then in CSJS, check whether that variable exists (i.e. you're in read mode), otherwise get the value directly from the radio button dynamically.

Answer 2

I could think of a (possible) solution and a workaround.

The (possible) solution is to enable the "showReadonlyAsDisabled" property for your radio group. By (possible) i mean that i'm not 100% sure whether this exists for radio groups. But if it does your control should be rendered as a "control" with values in your html markup, with a "readOnly" attribute applied to it. Can't test this before tomorrow morning.

If this doesn't work you could also copy your value to a hidden field using the radio group's onchange event, then read that helper field's value which should be mich easier to retrieve.

Update:
just gave it a try: the "(possible)" solution unfortunately is not possible at all for radioGroups, so forget it.

You're most likely stuck with some other solution, as lined out in my 2nd option, or as @stwissel described it (his option #1). My workaround then would look a bit like this:

my radioGroup is bound to a field named rbGroup. There is also a simple data field on the same form named rbvalue, and on the Xpage I have an editBox control bound to rbvalue which is hidden through a css display:none statement. For this editBox I have the showReadonlyAsDisabled property set to true (for editBoxes this works):

    <xp:inputText
        id="rbGrpHelper"
        value="#{doc1.rbValue}"
        showReadonlyAsDisabled="true">
    </xp:inputText>

The onchange event handler for my radioGroup performs some simple code copying the radio's selected value to rbvalue, and it performs a partial refresh on a div containing the rbGrpHelper editBox:

doc1.replaceItemValue("rbValue", doc.getItemValue("rbGroup"))

Now if my xpage is open in read mode, because of the showReadonlyAsDiabled property my hidden helper field looks like this in its HTML markup:

<input type="text" 
  value="1" id="view:_id1:rbGrpHelper" 
  name="view:_id1:rbGrpHelper" 
  readonly="readonly" 
  style="display:none" 
  class="xspInputFieldEditBox">

That way the rbGrpHelper is always up to date, and you can use your CSJS code to access the selected value.

Answer 3

Short: Don't
Long: By nature of forms, a readonly mode does not have input elements in it like radio buttons, inputboxes etc. You have a series of options:

1. You did bind your radio group to #{FInvoiceDoc.PayType}, so you could compute a hidden field (using a computed text with passthrou like <xp:text value="&lt:input type=\"hidden\" value=\"#{FInvoiceDoc.PayType}\"" escape="false"></xp:text>. Then simply use that value client side

2. If you need to switch even in read mode, you need to compute the radio group too, so it is switchable

3. Use a set of SSJS functions showSection_InterestingName(doc) {....} to compute the value true/false to show the sections in read mode (or use showSection(doc, sectionName). This way you abstract the computation from the display a little and it is easier to read for the dev after you

Hope that helps