• View
• Edit
• History
• Attach
• Print
• Backlinks

FoxSection

Questions answered by this recipe

How can I give a user the possibility to duplicate a form section if the user wants to enter many occurrences of the info collected by this section?

How can I make the section of a form appear only if a previous value was selected?

Description

FoxSection provides five new directives:

(:foxsection:) and (:foxsectionend:) define a section of a form to be copied when the user click on the copy button or displayed when a values is selected.

The name of the section should always be specified in the (:foxsection:) directive like this: (:foxsection townsection:). (:foxsectionend:) simply closes the open <div> and does not need to be named.

When used to conditionnaly display the defined section, you must add the two following options to (:foxsection:):

• dep: name of the dependent select input which value determines if the section is displayed or not.
• value: value the select input must be selected to for the section to be displayed.

e.g. (:foxsection townsection dep=town value=other:)

The remaining directives are used when we want a section to be duplicatable.

(:foxsectionnumber:) indicates the number of the duplicated section so you can number them automatically. See the example below.

(:foxsectioncopybutton:) is the button the user has to push to duplicate the section. It should be put outside of the section to duplicate. It has the following options:

• sectionname: name of the section to duplicate.
• text: text to be displayed on the button.
• maxcopy: maximum number of duplicates. The button becomes disabled after the section has been duplicated this number of time.
• class: class name to be applied to the button.

(:foxsectionmoveicon:) is a button displayed for each duplicated section to be able to reorder it. It appears only when at least two duplicates are displayed. It should be put inside the section to be duplicated. When a section is reordered, (:foxsectionnumber:) directives are updated to reflect the new section numbers. It has the following options:

• text: text to be displayed on the button to the right of the reorder icon.
• class: class name to be applied to the button.

Examples

Example 1 showing the conditional display fonctionality
The "othertown" input is displayed only when "other" is selected for the "town" select input.

(:input form "https://www.example.com":)
Name: (:input text username:)

Town: (:input select name=town value=paris label=Paris:)
(:input select name=town value=london label=London:)
(:input select name=town value=newyork label=New-York:)
(:input select name=town value=other label=Other:) 

(:foxsection othertownsection dep=town value=other :)
Other Town: (:input text othertown:)

(:foxsectionend:)

(:input submit post Submit:)
(:input end:)

Example 2 showing a complete example demonstrating both fonctionalities at the same time
Note how "_fsnumber_" is added to each input names inside the section to uniquely identify each input. "_fsnumber_" will automatically be replaced with a sequencial number so that these inputs will be renamed "town_fsn1", "town_fsn2", "town_fsn3", etc. after initialisation and duplication of the section.

(:input form "https://www.example.com":)
Name: (:input text username:)

(:foxsection townsection:)

Town no. (:foxsectionnumber:) (:foxsectiondeletebutton text="Delete this town":) (:foxsectionmoveicon text="Reorder":)

Town: (:input select name=town_fsnumber_ value=paris label=Paris:)
(:input select name=town_fsnumber_ value=london label=London:)
(:input select name=town_fsnumber_ value=newyork label=New-York:)
(:input select name=town_fsnumber_ value=other label=Other:) 

(:foxsection othertownsection_fsnumber_ dep=town_fsnumber_ value=other :)
Other Town: (:input text othertown_fsnumber_:)

(:foxsectionend:)
(:foxsectionend:)
(:foxsectioncopybutton townsection text="Add a town" maxcopy=3:)

(:input submit post Submit:)
(:input end:)

Installation

Copy foxsection.phpΔ to your cookbook folder and add

to your local/config.php file.

Note

This recipe will also work with PmWiki default forms not controlled by the Fox recipe.

Change log / Release notes

2023-12-01: Added animation for conditional sections and made move icon work on touch devices. 2023-11-23: Added delete and add transitions and a directive to be able to reorder copied sections.
2023-11-01: First version.

See also

Fox

Contributors

PierreRacine

Comments

See discussion at FoxSection-Talk?