Advanced Customization Options for Repeatable Sections

Please note that the advanced techniques presented here require at least a basic understanding of javascript programming.

The code samples provided below can be added to your form using the Form Builder "Custom Code" field. Here's how it works:

1. Open your form in the Form Builder.
2. Click on your form's name in the outline and open the 'advanced' properties panel.
3. Copy and paste the code in the "Custom Code" field:
4. Make any modifications as needed.
5. Save your form.
6. Some javascript customization may not be effective in the Form Builder preview, so be sure to test using the live form on FormAssembly.

Limiting the number of repeated sections

Here's the most basic way to handle this. All repeatable sections can be repeated up to a specific number of times (here 5).

<script type="text/javascript">

wFORMS.behaviors.repeat.allowRepeat = function(elem, b){
  var max = 5; /* <- change this as needed */
  var c = b.getSectionsCount();
  if(c>=max) return false;
  return true;
}

</script>

If you have several repeated sections in your form and you need to set different maximum values, you can test the elem variable to see what element is being repeated. For instance:

<script type="text/javascript">

wFORMS.behaviors.repeat.allowRepeat = function(elem, b){
  
  switch(elem.id) {
  	case "tfa_contacts": 
  		var max = 5;
  		break;
  	default: 
  		var max = 3; 
  } 
  
  var c = b.getSectionsCount();
  if(c>=max) return false;
  return true;
}

</script>

You will need to refer to the HTML source code of your form to find out the relevant element ids.

Changing the name of a repeated section

In this example, the label of the fieldset (<legend> tag) is modified with the count number.

<script type="text/javascript">

wFORMS.behaviors.repeat.onRepeat = function(elem) {
  var m = wFORMS.behaviors.repeat.getMasterSection(elem);
  var i = wFORMS.getBehaviorInstance(m, 'repeat'); 
  var count = i.getSectionsCount();
  
  var l = elem.getElementsByTagName('legend');
  l[0].innerHTML += " #"+count;
}
</script>