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. First, find the code sample you need in the list below.
  2. In the Form Builder, click Properties, then Custom Code
  3. Paste the code in the “Custom Code” field.
  4. Save and test with the address found in the publish tab of your form’s options.
  5. 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>