如何在Gravity Forms中动态传递地址距离widget数值到产品字段计算

前端实时同步方案（推荐用于动态计算场景） #

• 第一步：定位元素ID
  先通过浏览器开发者工具找到两个核心元素的ID：
  1. 距离widget输出数值的容器元素ID（例：address_distance_result）
  2. 目标Gravity Forms产品字段的input元素ID，格式一般为input_{表单ID}_{字段ID}（例：表单ID为2、产品字段ID为10时，ID为input_2_10）
• 第二步：添加JS同步代码
  把以下代码添加到表单所在页面的自定义JS区块，或者Gravity Forms的自定义JS设置中：

  // 监听距离输出元素的内容变化，适配异步计算场景
  const distanceEl = document.getElementById('address_distance_result');
  const gfProductEl = document.getElementById('input_2_10');
  const formId = 2; // 替换为你的实际表单ID
  
  if (distanceEl && gfProductEl) {
    // 提取数值方法
    const extractDistance = () => {
      const distanceText = distanceEl.textContent.trim();
      // 匹配文本中的数字（支持整数、小数）
      const matchRes = distanceText.match(/[\d.]+/);
      const distanceVal = matchRes ? parseFloat(matchRes[0]) : 0;
      // 赋值给GF产品字段
      gfProductEl.value = distanceVal;
      // 触发Gravity Forms全局计算更新
      jQuery(gfProductEl).trigger('change');
      if (window.gformCalculateTotal) {
        gformCalculateTotal(formId);
      }
    };
  
    // 初始化执行一次
    extractDistance();
  
    // 监听元素内容变化，适配异步距离计算
    const observer = new MutationObserver(extractDistance);
    observer.observe(distanceEl, { childList: true, subtree: true, characterData: true });
  }
  

• 第三步：验证效果
  输入两个地址触发距离计算，查看产品字段是否同步更新数值，表单总价是否按规则正确计算。

后端校验同步方案（推荐用于付费类场景，避免前端篡改） #

如果你的场景涉及费用结算，除了前端同步外，建议增加后端校验逻辑，在表单提交前强制同步数值：

• 将以下代码添加到主题的functions.php文件或者自定义插件中：

  // 替换下方的_3为你的实际表单ID，例：表单ID为5则改为gform_pre_submission_5
  add_action( 'gform_pre_submission_3', function( $form ) {
    // 20替换为距离字段的提交参数ID
    $raw_distance = rgar( $_POST, 'input_20' );
    preg_match( '/[\d.]+/', $raw_distance, $matches );
    $distance_val = floatval( $matches[0] ?? 0 );
    // 15替换为目标产品字段的ID
    $_POST['input_15'] = $distance_val;
  } );
  

注意事项 #

• 若你的距离widget输出的数值格式包含千位分隔符，需要先把分隔符删掉再做正则匹配，避免提取数值错误
• 表单和字段ID可以在Gravity Forms表单编辑页，鼠标悬停对应字段时在浮层中看到
• 若距离计算是用户点击按钮触发的，也可以直接给按钮绑定点击事件调用extractDistance方法，性能优于监听元素变化

内容的提问来源于stack exchange，提问作者Ian Ford