How to get element id in client-side javascript in Orbeon Forms?

Question

I'm new to XHTML, XForm, and Orbeon, and I've got a question in regards to retrieving HTML element ID using client-side javascript in Orbeon Forms. In normal HTML I'd just used the getElementById function, and Orbeon's documentation suggest a function for retrieving the value of an element (controller in their terminology).

ORBEON.xforms.Document.getValue(controlIdOrElement)

However, with an Orbeon From (snippet) such as

<xf:bind id="fr-form-binds" ref="instance('fr-form-instance')">
  <xf:bind id="section-1-bind" name="section-1" ref="section-1">
     <xf:bind id="cvr-input-bind" name="cvr-input" ref="cvr-input"/>

  (...)

<fr:section id="section-1-control" bind="section-1-bind">
  <xf:label ref="$form-resources/section-1/label"/>
    <fr:grid>
      <xh:tr>
        <xh:td>
          <xf:input id="cvr-input-control" bind="cvr-input-bind">
            <xf:label ref="$form-resources/cvr-input/label"/>
            <xf:hint ref="$form-resources/cvr-input/hint"/>
            <xf:alert ref="$fr-resources/detail/labels/alert"/>
          </xf:input>
        </xh:td>
  (...) 

the getValue function doesn't find a value on any of the parameter variants

• cvr-input
• cvr-input-control
• cvr-input-bind

given as a string.

When I inspect the generated form I see that the input element has gotten the id section-1-control≡xf-383≡cvr-input-control , to which it makes sense that getValue cannot find it on the three variants above.

I've made a trigger button--shown below--that produces the intended result (map the input value to another controller/element), but I can't imagine the solution would have to involve hard-coding the section-parts of the element ID.

Thus my question is: how do I retrieve an element/controller (or its value) when the coded ID is modified in the final view?

<xf:trigger id="get-pnumbers-btn-control" bind="get-pnumbers-btn-bind">
  <xf:label ref="$form-resources/get-pnumbers-btn/label"/>
  <xf:hint ref="$form-resources/get-pnumbers-btn/hint"/>
  <xf:alert ref="$fr-resources/detail/labels/alert"/>
  <xxf:script ev:event="DOMActivate" type="javascript">
    var cvrInputElementId = "section-1-control≡xf-383≡cvr-input-control";
    var cvrOutputElementId = "section-1-control≡xf-383≡cvr-output-control";
    var cvrInput = ORBEON.xforms.Document.getValue(cvrInputElementId);
    ORBEON.xforms.Document.setValue(cvrOutputElementId, cvrInput);
  </xxf:script>
</xf:trigger>

Answer 1

The xxf:client-id() function resolves an id and returns the client id. That could be helpful. Then you need somehow to pass that id to the script (which is easy with the upcoming 4.11 but a bit harder previously).

You can also use jQuery, finding an element with id ending with a certain string:

var clientId = ORBEON.jQuery('[id $= "cvr-input-control"]').attr('id')

There is an RFE to improve the id scheme .