javascript - Formstack. DDL supplied data via an API. When value selected json parsed & displays on screen in appropriat

admin管理员组

文章数量:1287555

I have a formstack form that uses embedded javascript code to call an API and populates a dropdown list. Once I select a value, the appropriate json data is parsed and displays on screen in each field like empName, empEmail, supervisorEmail, empFirstName, empLastName, supervisorId, empID, deptName. However, once I submit the form, the injected data from the selection is not saved at formstack nor is it included in email sent. If I manually type into the injected fields values are saved. Looks for help on fixing this.

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

本文标签：