Buy Now
Sign in

Renaming fields in Repeater area

Joao Serina , February 06 at 14:07
Answered
J
Joao Serina

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:

admin
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
Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
J
Joao Serina
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!
admin
Hi Joao,
Yes, the custom JS should not be difficult:
$("#button_id").on("click", function(){​
​ $(".repeater").children().last().remove();​
​});
I think that code should work but you better test it!
Best regards
Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!