Confirmation With XForms

In Web pages using Ajax, when you click on a button or a link, instead of loading another page, that click often starts a background request to the server, and the page then updates based on the response received from the server. If the action is destructive, it might make sense to ask users to confirm their intent. A pop-up is a simple but not very elegant solution. Instead, we can replace the button or link with the confirmation message, as shown in the animation on the right. And you can do this in just a few lines of XForms:

<xforms:switch>
    <xforms:case id="delete">
        <xforms:trigger appearance="xxforms:link">
            <xforms:label>Delete</xforms:label>
            <xforms:toggle case="confirm" ev:event="DOMActivate"/>
        </xforms:trigger>
    </xforms:case>
    <xforms:case id="confirm">
        Are you sure?
        <xforms:trigger appearance="xxforms:link">
            <xforms:label>Delete</xforms:label>
            <xforms:action ev:event="DOMActivate">
                ... Perform actual deletion here ...
                <xforms:toggle case="delete"/>
            </xforms:action>
        </xforms:trigger>
        <xforms:trigger appearance="xxforms:link">
            <xforms:label>Cancel</xforms:label>
            <xforms:toggle case="delete" ev:event="DOMActivate"/>
        </xforms:trigger>
    </xforms:case>
</xforms:switch>