Gravity Forms use JS to count rows in List and return to field?

Question

I am trying to make a sign up form in gravity forms that uses the list field so multiple people can be signed up at once. The problem is I also need to get a quantity of how many people are signing up so I can charge a fee for each.

With JS, how would I count the number of rows in the list and pass the value to another field? Or is there a better method to do this?

UPDATE:

Based on Obsidian Age's answer, this refreshes occasionally and outputs to the quantity field:

function updateQty() {
    var rows = document.querySelectorAll('.gfield_list_group').length; // Count rows
    var qty = document.querySelector('.ginput_quantity'); // Define output location
    qty.value = rows; // Put row count in location
    setTimeout(updateQty, 2000); // Repeat every 2 seconds
}
updateQty(); // Execute

Answer 1

I'm not familiar with the particular plugin's outputted markup, but you can simply grab all of the desired elements with something like .querySelectorAll() . From here, it's trivial to find the number of them by simply querying their .length . If you assign this number to a variable, you can reference it later on when you want to insert it back to a different field -- which can be done by updating the element's .innerHTML with the variable.

This can be seen in the following:

 const amount = document.querySelectorAll('.row').length; const output = document.querySelector('.output'); output.innerHTML = amount;

 <div class="row">One</div> <div class="row">Two</div> <div class="row">Three</div> <div class="row">Four</div> <br /> <div class="output"></div>

Answer 2

Try this, though outdated... https://gravitywp.com/list-number-field-gravity-forms/ https://github.com/wp-plugins/gravity-forms-list-field-select-drop-down

Or for a cost: https://gf-list-field-counter.webaware.net.au/examples/fixed-fee-per-row/

Answer 3

<script>
jQuery.expr[':'].hasValue = function(el, index, match) {
  return el.value != "";
};
    
function updateQty() {
    var listFieldID = '#field_85_12 .gfield_list_12_cell1 input:hasValue';
    var totalFieldID = '#input_85_35';
    
    var totalRows = $(listFieldID).length; // Count rows
    var totalField = $(totalFieldID);

    console.log(totalRows); // For testing

    $( totalField ).val( totalRows +1 ).change();
    setTimeout(updateQty, 3000); // Repeat every 2 seconds
}
updateQty(); // Execute 

</script>