Forums

I am trying do use a repeater area in my form. So far it is all working perfectly but when I remove one of the repeated areas I want the others to be renamed accordingly. For example if I have [Area 1], [Area 2] and [Area 3] and then, I delete [Area 2] I want to rename [Area 3] to become [Area 2].
I have created a small jQuery script that checks the number of repeated areas and names the next area accordingly but I still can't rename the areas. I have tried to bind events to the "remove" button of the repeater area but it just seems impossible for some reason.
I could really appreciate a hand in this especially since I'll need to this sort of thing for a few other forms. Below you can find a GIF of the form, my jQuery script and a backup of my form if needed. This is a multi page form and the page viewed on the GIF is "projectInformation".
PS: I would also love to know how to turn on the validation for the fields inside the repeater area because if they are required I will always get an error they were not filled even if they were.
Thank you very much for your time.
Gif of the form:

Code:

//Fix supervisor Numbering
(function ($) {
    var $numberOfSupervisors = $(".supervisorArea.repeater").data("count");
    var $numberOfSupervisorAreas = $(".supervisorArea").children(".clone-item").length;
    $(document).ready(function (param) {
        $("#addSupervisorButton").click(AddThesisSupervisorCountCheck);
    });
     
     function AddThesisSupervisorCountCheck() {
        if ($(".supervisorArea").children(".clone-item").length == 0) {
            $numberOfSupervisors = 1;
        } else if ($(".supervisorArea").children(".clone-item").length >= 4) {
            $numberOfSupervisors = 5;
        } else {
            $numberOfSupervisors = $(".supervisorArea").children(".clone-item").length + 1;
        }
        $(".supervisorArea.repeater").data("count", $numberOfSupervisors);
     }
})(jQuery);

Form backup:[file=10017]CQM_Member_Registration_06_Feb_2018_13_58_22.cf6bak[/file]

Hi Joao,
​
It's a bit difficult to rename them, you can add a button to remove the last clone instead if this is necessary.
​
The validation should work if the fields have unique ids and names, for this to happen you need to use the {var:repeater_area_name.key} in the fields ids.
​
Best regards

I see, I would have to add the button outside of the repeater body then and use a custom JS in order for this to work correct?
​
Thank you very much for your reply! 🙂