Search code examples
orbeonxforms

How can I remove the content of an element when is not relevant?


If I have a radio button with three options A, B, C and I have an input field that the relevancy depends on if the radio button has the value A. Then: If I select the value A in the radio button, the input field is visible and I can add a value. BUT when I change the radio button to B, the Input field is hidden but the value is still there (if I select A again, I can see the value)

Is it possible to remove the value by an event?


Solution

  • The simplest is to reset the value with a calculate, which you can place in the same xf:bind you use to hide the input when the value B is select, as done in the example below. For forms created with Form Builder, there is an RFE for this behavior to be implemented out-of-the-box, but reseting the value only on save/submit, so if you switch back and forth between A and B, the value in the input wouldn't be lost, but it is cleared when the form is saved/submitted.

    <xh:html xmlns:xh="http://www.w3.org/1999/xhtml"
          xmlns:xf="http://www.w3.org/2002/xforms"
          xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
          xmlns:ev="http://www.w3.org/2001/xml-events"
          xmlns:xs="http://www.w3.org/2001/XMLSchema"
          xmlns:fr="http://orbeon.org/oxf/xml/form-runner">
        <xh:head>
            <xh:title>XForms Hello</xh:title>
            <xf:model>
                <xf:instance>
                    <instance>
                        <select1>A</select1>
                        <input/>
                    </instance>
                </xf:instance>
                <xf:bind ref="input"
                         relevant="../select1 = 'A'"
                         calculate="if (../select1 = 'A') then . else ''"
                         readonly="false()"/>
            </xf:model>
        </xh:head>
        <xh:body>
            <xf:select1 appearance="full" ref="select1">
                <xf:item>
                    <xf:label>A</xf:label>
                    <xf:value>A</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>B</xf:label>
                    <xf:value>B</xf:value>
                </xf:item>
            </xf:select1>
            <xf:input ref="input"/>
        </xh:body>
    </xh:html>