I have two questions on Repeater Area:
- How to trigger an event for add & remove clone events?
- In CF7, you could add listener to a click event on the add or remove clone buttons.
- How to pre-populate a repeater area with an initial set of clones with values
- In CF7 you could populate in a PHP action like: $this->data['myRepeaterDataSource'][1]['myFieldName'] = "myPreDefinedValue";
Hi CraignH
This code can help you get the info you need:
document.addEventListener("click", e => {
if(e.target.matches(".remove-clone")){
let k = e.target.closest(".clonable").getAttribute("data-key") //get key value of the clone to remove
}
})add buttons have a standard class which you can use: repeater-name-cloner, where "repeater-name" are the view name of the repeater and can be changed using the "Wizard settings" behavior or you can view them in the page source
You can set the repeater fields values the same way but you need to add keys for the repeater to the data array too, if you enable the form debug and send the repeater once, check the data array for how the repeater has set a value for each clone you created, you will need to set the same values before the repeater in order to load it with x number of items
Many thanks for the advice on question 1. I am now able to get listeners on remove clone clicks.
Re question 2, from your advice I have made a bit of progress but not there yet. As I describe below.
My simple test form has a repeater with two fields "craft_label" and "craft", and I have set the repeater name in the wizard settings to "craft_loop". The craft_label is readonly and populated from a listener triggered when the "craft" field changes and displays some fixed text plus the content of the field craft. When I use the add_clone button to create two repeat clones dynamically in the form and submit to the next page the debug output shows they are stored thus:
[craft_label] => Array
(
[1] => Craft: Laser
[2] => Craft: Phantom
)
[craft] => Array
(
[1] => Laser
[2] => Phantom
)
[craft_loop] => Array
(
[1] => 1
[2] => 1
)
So I added PHP action to create this structure in the $this->data object.
$this->data['craft'][1] = "Laser";
$this->data['craft_label'][1] = "Craft: Laser";
$this->data['craft_loop'][1]=1;
$this->data['craft'][2] = "Phantom";
$this->data['craft_label'][2] = "Craft: Phantom";
$this->data['craft_loop'][2]=1;
Having done this, the form loads with two repeat clones but all with fields empty.If I enter values for the two empty repeats for field "craft", the event listeners are not triggered so the "craft_label" remains empty
I add a further clone dynamically with the add clone button and populate field "craft", the field "craft_label" is correctly updated via the listener JS code.
When I submit to the next page the debug data shows:
[craft] => Array
(
[1] =>
[2] =>
[3] => Feva
)
[craft_label] => Array
(
[1] =>
[2] =>
[3] => Craft: Feva
)
[craft_loop] => Array
(
[n] => 1
[3] => 1
)
Note the strange appearance of key [n] in craft_loop.
I had a go at writing some javascript to populate the fields of the pre-existing clones, but got stuck when I found that the shortcuts embedded in javascript do not get replaced in CF8 like they do in CF7.Ie placing something like
initialFields = {data:craft}
and I get a JS referenceerror.
