How to add more fields to the form depending on user selection?

  • Profile Image
    Asked on December 31, 2013 at 09:00 AM

    Hi guys.


    I'm looking at building a form which has a button to add a new row of fields. The form is for a multiple participants entry to an event.

    As you can see from my quick mock-up attached, I want to add the fields 'Name, Age, Q1, Q2, Q3 & Teacher/coach' when the user clicks the '+ Add Participants' link. I can do this in JQuery and assign each new field an incremented numerical value but I am not to sure whether the form will send this data. 

    If you could let me know if you have pre-built tools to achieve this or if not, will my JQuery work?

    Here is my JQuery:

    var regex = /^(.*)(\d)+$/i; var cloneIndex = $(".clonedInput").length; $("button.clone").live("click", function(){ $(this).parents(".clonedInput").clone() .appendTo("body") .attr("id", "clonedInput" + cloneIndex) .find("*").each(function() { var id = || ""; var match = id.match(regex) || []; if (match.length == 3) { = match[1] + (cloneIndex); } }); cloneIndex++; 



    This is not ideal so if the tools are there in Form Builder I would much rather use them...maybe a clever 'Show/Hide' trick I can use.

    Thanks for your time,


  • Profile Image
    Answered on December 31, 2013 at 09:05 AM

    Quick update:

    Another possible solution would be a field which asks specifically how many participants there will be and displaying that number of rows...if that's easier.


  • Profile Image
    Answered on December 31, 2013 at 01:30 PM

    I think  our widget Dynamic Fields  can sort your issue out

    Please give that a try and let us know if further help is needed