Gravity Forms使用JS统计List中的行数并返回字段？

Posted 2023-02-19

【中文标题】Gravity Forms使用JS统计List中的行数并返回字段？

【英文标题】：Gravity Forms use JS to count rows in List and return to field?

【发布时间】：2019-03-01 15:00:23

【问题描述】：

我正在尝试以重力形式制作一个使用列表字段的注册表单，以便可以同时注册多个人。问题是我还需要知道有多少人注册，这样我才能为每个人收取费用。

使用 JS，我如何计算列表中的行数并将值传递给另一个字段？还是有更好的方法来做到这一点？

更新：

根据黑曜石时代的回答，这会偶尔刷新并输出到数量字段：

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

【参考方案1】：

我不熟悉特定插件的输出标记，但您可以使用 .querySelectorAll() 之类的内容轻松获取所有所需的元素。从这里，只需查询他们的 .length 即可轻松找到他们的数量。如果将此编号分配给变量，则可以稍后在要将其插入到不同的字段时引用它——这可以通过使用变量更新元素的 .innerhtml 来完成。

这可以在下面看到：

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>

【讨论】：

感谢您的帮助，您让我走上了正确的道路。我必须对其进行更改，以便它可以更新并输出到一个字段，但这基本上是您的建议。

【参考方案2】：

<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>