You are viewing a plain text version of this content. The canonical link for it is here.
Posted to docs@cocoon.apache.org by da...@cocoon.zones.apache.org on 2006/03/12 15:13:26 UTC
[DAISY] Updated: How do I implement a cancel button in Cocoon Forms?

A document has been updated:

http://cocoon.zones.apache.org/daisy/documentation/860.html

Document ID: 860
Branch: main
Language: default
Name: How do I implement a cancel button in Cocoon Forms? (unchanged)
Document Type: FAQ (unchanged)
Updated on: 3/12/06 2:13:14 PM
Updated by: Sylvain Wallez

A new version has been created, state: publish

Parts
=====
Content
-------
This part has been updated.
Mime type: text/xml (unchanged)
File name:  (unchanged)
Size: 1248 bytes (previous version: 1112 bytes)
Content diff:
    <html>
    <body>
    
--- <p>The key to implementing a cancel button -- or any button you where you want
--- to exit the current form and move on to somewhere else -- is to add an event
--- handler to the button which indicates to the form that it should end the form
--- processing, and then checking the if the submit widget of the form is the cancel
--- button.</p>
+++ <p>There are two kinds of "buttons": actions and submits. Actions are internal
+++ to the form, and thus always redisplay it, whereas submits are intended to exit
+++ the form.</p>
    
--- <p>Below follow some snippets which illustrate this.</p>
+++ <p>A <tt>&lt;fd:submit&gt;</tt> normally tries to validate the form and will
+++ redisplay it in case of validation error, unless it has the
+++ <tt>validate="false"</tt> attribute. A cancel button will have this attribute
+++ set to false, and we will use the value of form.submitId to distinguish the ok
+++ and cancel buttons.</p>
    
--- <p>In the form definition, add the declaration of a cancel button:</p>
+++ <p>In the form definition, add the declaration of ok and cancel buttons:</p>
    
--- <pre>    &lt;fd:action id="cancel"&gt;
+++ <pre>    &lt;fd:submit id="cancel" validate="false"&gt;
          &lt;fd:label&gt;Cancel&lt;/fd:label&gt;
---       &lt;fd:on-action&gt;
---         &lt;fd:javascript&gt;
---           event.getSourceWidget().getForm().endProcessing(false);
---         &lt;/fd:javascript&gt;
---       &lt;/fd:on-action&gt;
        &lt;/fd:action&gt;
+++ 
+++     &lt;fd:submit id="ok"&gt;
+++       &lt;fd:label&gt;OK&lt;/fd:label&gt;
+++     &lt;/fd:action&gt;
    </pre>
    
    <p>In the flowscript, after the <tt>form.showForm</tt> function returns, you can
--- check if the user pressed the cancel button using form.submitId:</p>
+++ check what button the user pressed using <tt>form.submitId</tt>:</p>
    
    <pre>    var form = new Form("myform.xml");
        form.showForm("myform-display-pipeline");
    
        if (form.submitId == "cancel") {
          // the user pressed cancel
---     }
+++     } else if (form.submitId == "ok") {
+++       // the user pressed ok and the form is valid
+++     } 
    </pre>
    
    </body>
(1 equal lines skipped)


Fields
======
no changes

Links
=====
no changes

Custom Fields
=============
no changes

Collections
===========
no changes