wForms 2.0 Tutorial - Limiting Repeatable Sections

The wForms repeat behavior can be used to provide more than one answer to a specific section of a form. The wForms Limited Repeat is a variation of this behavior that lets you set a upper limit to the number of times a section can be repeated.

In this example, we want to allow the user to enter up to 3 guests. Click the 'Add another guest' link to see how it works.

 

Invitation

You may invite up to three guests to come with you. Please provide their name and email.




 

wFORMS Installation

This code goes in your page's <HEAD> element. It installs the wForms library and enables the limited repeat behavior. 

<script type="text/javascript" src="/wForms/v2.0/modules/wforms_core.js" ></script>
<script type="text/javascript" src="/wForms/v2.0/modules/wforms_repeat_limited.js" ></script>

 

Setting up the Repeat Behavior

To make the fieldset repeatable we just need to give it a unique id and set its class to 'repeat'. 

<fieldset id="guestSection" class="repeat">

 

Limiting the Repeat Behavior

First add the following CSS rule to your page or stylesheet:

<style type="text/css">
.duplicateLinkHidden {
display: none;
}
</style>

Then add a hidden field to your form. It will hold the number of allowed repeats.

<input type="hidden" id="guestSection-MaxRC" value="2" disabled="disabled" />

The id of the hidden field should match the id of the repeated section with the -MaxRC suffix added.

The field value represents the number of time the section can be repeated. Note that by setting the value to '2', we end up with a maximum of 3 sections (the original and the two copies).

The disabled attribute prevents the field from being submitted (this is optional).

 

HTML Code

For reference, here's the HTML for the form above: 
<form method="post" action="" name="wf_DemoForm" id="tutorial1" style="background-color:#FDFFF0; padding:10px; border:1px solid #ccc">
<h2>Invitation</h2>
<p><em>You may invite up to three guests to come with you. Please provide their name and email.</em></p>
<fieldset id="guestSection" class="repeat">
<label for="guestName" class="preField">Guest Name  :</label>
<input type="text" id="guestName" name="guestName" value="" class=""/> <br/>
<label for="guestEmail" class="preField">Guest Email :</label>
<input type="text" id="guestEmail" name="guestEmail" value="" class=""/> <br/>
</fieldset>
<input type="hidden" id="guestSection-MaxRC" value="2" disabled="disabled" />
<br/>
<div style="text-align: center; margin:15px 0;"><input type="submit" value="Submit" /></div>
</form>

 

For questions or comments regarding this tutorials, please go to the wForms discussion board.

This tutorial shows how to limit the number of time a section can be duplicated with the wForms Repeat behavior.

Thanks to Michael Bennet for contributing the code for wforms_repeat_limited.js