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

Question

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?

Answer 1

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>