Forums

In preparation for converting CF7 forms with repeats to CF8 I am playing with a simple CF8 form to get to grips with the CF8 implementation, and have a question about complex listeners within the repeat group.

I have a repeater area with key name "n" and all the fields within the repeat area have field names "myfieldname[n]".  I have an event trigger on field "class[n]" called "ClassChanged" and I have an advanced listener on field "craft_label[n]" to call a javascript function CopyCraftName when ClassChanged is triggered.  In the javascript function I console log the arg1 that is passed to the JS function. 

Simple JS function below:

function CopyCraftName(arg1){

    console.log("CopyCraftName called with arg1");

    console.log(arg1);

    return 0;

}

When I change the field value in field class[n] on one of the clones of the repeat group the console shows the below for arg1

<input type="text" id="craft_label_n" placeholder="" value="" name2="craft_label[n]" oname="craft_label[n]">

My question is how do you get instance number of the cloned repeats that has actually changed?

environment is

CF ver 8.0.44

Joomla ver 5.2.6

Found a solution, and in case it helps anyone else, you can simply use (so long as the input generating the trigger has an id)  "event.target.id" in the listener JS function.

The structure of the cloned field id generated is myInputFieldName_n-i   where n is the repeater keyname and i is the clone index I am looking for.

So something like

    let repeatIndex = event.target.id.split("-").pop();

will give you the clone index.

It seems in my test form arg1 passed to the JS function points to the hidden reference version of the field so

arg1.closest(".clonable").getAttribute("data-key")

 always returns the character "n", which is the repeater loop key name.

Ah, just realised, I think, that you are suggesting

let repeatIndex = event.target.closest(".clonable").getAttribute("data-key");

is a better code than the line I posted.

yes, the line you posted should work correctly for the trigger clone:

event.target.closest(".clonable").getAttribute("data-key");