Formstack表单API注入数据提交后未保存问题求助

嘿各位，我碰到个Formstack的棘手问题，想请大家支个招：

我做了个Formstack表单，用嵌入的JS调用API拉数据填充下拉选框。选好选项后，对应的JSON数据会自动填到页面上的各个字段（比如empName、empEmail、supervisorEmail这些），页面上看都显示正常，但提交表单后这些自动填充的数据既没存在Formstack里，也没出现在通知邮件里——可要是我手动在这些字段里敲内容，提交后就一切正常，数据能存也能发邮件。

我现在用的代码如下，麻烦帮忙看看哪里出问题了？

<script>
  document.addEventListener("DOMContentLoaded", async function () {
    var getLocationHost = window.location.host;
    let apiURL;

    if (getLocationHost.includes("test")) {
        apiURL = 'hidden for asking help on stackoverflow';
    } else if (getLocationHost.includes("dev")) {
        apiURL = 'hidden for asking help on stackoverflow';
    } else if (getLocationHost.includes("intg")) {
        apiURL = 'hidden for asking help on stackoverflow';
    } else if (getLocationHost.includes("uat")) {
        apiURL = 'hidden for asking help on stackoverflow';
    } else if (getLocationHost.includes("stage")) {
        apiURL = 'hidden for asking help on stackoverflow';
    } else {
        apiURL = 'hidden for asking help on stackoverflow';
    }

    // Field IDs in Formstack
    const DROPDOWN_FIELD_ID = 'field180567125';
    const EMP_NAME_FIELD_ID = 'field180567127';
    const EMP_EMAIL_FIELD_ID = 'field180626437';
    const SUPERVISOR_EMAIL_FIELD_ID = 'field180567128';
    const EMP_FIRST_NAME_FIELD_ID = 'field180567129';
    const EMP_LAST_NAME_FIELD_ID = 'field180567130';
    const SUPERVISOR_ID_FIELD_ID = 'field180567519';
    const EMP_ID_FIELD_ID = 'field180567520';
    const DEPT_NAME_FIELD_ID = 'field180567695';

    try {
        const response = await fetch(apiURL);
        if (!response.ok) throw new Error("Error fetching employee data");

        let employeeData = await response.json();
        
        // Sort employee data
        employeeData.sort((a, b) => a.empNameAndDept.localeCompare(b.empNameAndDept, 
        undefined, { sensitivity: 'base' }));

        const dropdown = document.getElementById(DROPDOWN_FIELD_ID);
        if (!dropdown) return console.error("Dropdown field not found");

        // Populate dropdown
        dropdown.innerHTML = "";
        let defaultOption = new Option("Select an employee", "");
        dropdown.add(defaultOption);

        employeeData.forEach(employee => {
            let option = new Option(employee.empNameAndDept, String(employee.empId));
            dropdown.add(option);
        });

        // Change event listener
        dropdown.addEventListener("change", function () {
            setTimeout(() => { 
                const selectedEmpId = String(dropdown.value);
                const selectedEmployee = employeeData.find(emp => String(emp.empId) === 
        selectedEmpId);

                if (selectedEmployee) {
                    document.getElementById(EMP_NAME_FIELD_ID).value = 
                      selectedEmployee.empName || "";
                    document.getElementById(EMP_EMAIL_FIELD_ID).value = 
                       selectedEmployee.empEmail || "";
                    document.getElementById(SUPERVISOR_EMAIL_FIELD_ID).value = 
                       selectedEmployee.supervisorEmail || "";
                    document.getElementById(EMP_FIRST_NAME_FIELD_ID).value =                                                       
                        selectedEmployee.empFirstName || "";
                    document.getElementById(EMP_LAST_NAME_FIELD_ID).value = 
                         selectedEmployee.empLastName || "";
                    document.getElementById(SUPERVISOR_ID_FIELD_ID).value = 
                          selectedEmployee.SupervisorId || "";
                    document.getElementById(EMP_ID_FIELD_ID).value = 
                         selectedEmployee.empId || "";
                    document.getElementById(DEPT_NAME_FIELD_ID).value = 
                        selectedEmployee.deptName || "";
                }
            }, 100);
        });
    } catch (error) {
        console.error("Error fetching or populating employee data:", error);
    }
});
</script>

我的解决方案（针对这个问题） #

我之前也碰到过一模一样的情况！核心原因是Formstack不会识别你直接通过JS设置的value，因为它没监听到原生的表单事件——你手动输入时会触发input/change事件，Formstack能感知到，但JS直接改值不会触发这些事件，所以它根本不知道这些字段变了，提交时自然不会带上这些值。

解决方法很简单，就是设置完值后手动触发原生事件，让Formstack“看到”字段的变化：

步骤1：写个通用的字段赋值函数

先封装一个函数，用来设置值+触发事件，避免重复代码：

function updateFormField(fieldId, value) {
  const field = document.getElementById(fieldId);
  if (!field) return;
  field.value = value ?? "";
  // 触发input事件（Formstack主要监听这个）
  field.dispatchEvent(new Event('input', { bubbles: true }));
  // 再触发change事件兜底，确保所有情况都覆盖
  field.dispatchEvent(new Event('change', { bubbles: true }));
}

步骤2：替换原来的赋值代码

把你原来直接document.getElementById(...).value = ...的代码，全部换成调用这个函数。比如原来的：

document.getElementById(EMP_NAME_FIELD_ID).value = selectedEmployee.empName || "";

改成：

updateFormField(EMP_NAME_FIELD_ID, selectedEmployee.empName);

步骤3：去掉没必要的setTimeout

你代码里的setTimeout(100)其实完全不需要，现在直接处理就行，删掉它之后的代码会更简洁：

修改后的change事件监听部分：

// Change event listener
dropdown.addEventListener("change", function () {
    const selectedEmpId = String(dropdown.value);
    const selectedEmployee = employeeData.find(emp => String(emp.empId) === selectedEmpId);

    if (selectedEmployee) {
        updateFormField(EMP_NAME_FIELD_ID, selectedEmployee.empName);
        updateFormField(EMP_EMAIL_FIELD_ID, selectedEmployee.empEmail);
        updateFormField(SUPERVISOR_EMAIL_FIELD_ID, selectedEmployee.supervisorEmail);
        updateFormField(EMP_FIRST_NAME_FIELD_ID, selectedEmployee.empFirstName);
        updateFormField(EMP_LAST_NAME_FIELD_ID, selectedEmployee.empLastName);
        updateFormField(SUPERVISOR_ID_FIELD_ID, selectedEmployee.SupervisorId);
        updateFormField(EMP_ID_FIELD_ID, selectedEmployee.empId);
        updateFormField(DEPT_NAME_FIELD_ID, selectedEmployee.deptName);
    }
});

额外检查点

• 确认Formstack后台里这些字段没有被设置成“只读”或者“禁用”（虽然你能手动输入应该没问题，但还是确认下更稳妥）；
• 如果还是不行，可以试试把事件换成Event('input', { bubbles: true, cancelable: true })，不过一般不需要。

这样改完之后，Formstack就能正确识别到自动填充的字段值，提交时也会正常保存和发送这些数据啦！

备注：内容来源于stack exchange，提问作者BrewUpCode