Chained Select and Repeaters

Hi all,

Is there any way to configure the Chained Select add-on with repeater fields: https://docs.gravityforms.com/repeater-fields/ ?

Essentially, I am looking for the Chained Select dropdown dependant functionality with the option to have additional rows.

I tried this old snippet to manipulate the list field to have the same functionality as Chained Select: https://gist.github.com/spivurno/1da47636008cd90a8893 which does work however when trying to edit entries it only retrieves the value for first column.

Looking at it, it seems purchasing add-ons may be the only option to do this but thought I’d exhaust any other possibility first.

Thanks in advance!

It’s not using the repeater code or any other Gravity Forms plugin but I created a workout using both Chained Select and a list field with multiple columns and javascript.

Requirements:

  1. The Chained Select has a loaded CSV file.
  2. There is a HTML Field with text with an onclick function.
  3. There is a list field which has multiple columns enabled.

How it works:

If you have an empty row in the list field, the script below will take the values from the Chained Select columns, transfer them into the empty columns in the row and then empty the values in the Chained Select.

<span id="myText" onclick="transfertext()">Transfer Text</span>

<script>

function transfertext() { 
    
// This assigns the field inputs for the Chained Select to a variable.

var src1 = document.getElementById("input_15_1_1");

var src2 = document.getElementById("input_15_1_2");

var src3 = document.getElementById("input_15_1_3");

var src4 = document.getElementById("input_15_1_4");

var src5 = document.getElementById("input_15_1_5");

var src6 = document.getElementById("input_15_1_6");

i = 0;

// The while is set to 10000 rows but it will end when it finds an empty row.

while (i < 10000) {
    
// Each loop increases the value of i by 1
    
i++;

// These create a variable for the aria-labels names for the columns in the list field which increases with each loop. Change 'Column #' in 'Column #, Row " to the label of your column.

var column1 = "Column 1, Row " + i;

var column2 = "Column 2, Row " + i;

var column3 = "Column 3, Row " + i;

var column4 = "Column 4, Row " + i;

var column5 = "Column 5, Row " + i;

var column6 = "Column 6, Row " + i;

// Assigns the aria-labels to a variable

var dst1 = document.querySelector('[aria-label="' + column1 + '"]');

var dst2 = document.querySelector('[aria-label="' + column2 + '"]');

var dst3 = document.querySelector('[aria-label="' + column3 + '"]');

var dst4 = document.querySelector('[aria-label="' + column4 + '"]');

var dst5 = document.querySelector('[aria-label="' + column5 + '"]');

var dst6 = document.querySelector('[aria-label="' + column6 + '"]');

// If the first column of the row is blank, then insert inputs, otherwise continue loop.

if (dst1.value == "") {
    
// Assigns values from the Chained Select columns to the list field columns.

dst1.value = src1.value;
dst2.value = src2.value;
dst3.value = src3.value;
dst4.value = src4.value;
dst5.value = src5.value;
dst6.value = src6.value;

// Sets the columns in the Chained Select as blank so they can be used again for the next list row.

src1.value = "";
src2.value = "";
src3.value = "";
src4.value = "";
src5.value = "";
src6.value = "";

// exit loop once complete.

break;

};

};

};

  </script>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.