使用setAttribute设置的表单字段无法提交至后端问题求助

在WordPress站点使用Amelia Calendar插件，启用自定义字段后，通过JavaScript的document.setAttribute('value', 内容)方法设置字段值，提交表单时这些值无法发送到后端。

核心问题原因 #

用setAttribute('value', xxx)修改的是DOM元素的attribute，但表单提交时，浏览器发送的是表单元素的value property（JS层面的属性）。input的value attribute仅作为初始值存在，后续用户输入或JS修改应该直接操作value property，而非attribute。

修复后的代码 #

替换原来设置input值的代码，同时优化事件绑定方式（避免覆盖插件原有点击事件）：

if(window.location.href.includes("elementor-6")) {
    // 监听下一步按钮点击，用addEventListener避免覆盖原有事件
    function bindNextButton() {
        const nextBtn = document.querySelector(".am-button:nth-of-type(2)");
        if (!nextBtn) return;
        
        // 先移除已绑定的事件，避免重复绑定
        nextBtn.removeEventListener('click', handleNextClick);
        nextBtn.addEventListener('click', handleNextClick);
        console.log("下一步按钮事件绑定完成");
    }

    function handleNextClick() {
        setTimeout(() => {
            const heading = document.querySelector(".am-fs__main-heading-inner-title");
            if (!heading) return;

            if (heading.textContent !== "Your Information") {
                bindNextButton(); // 切换页面后重新绑定
                console.log("重新绑定下一步按钮事件");
            } else {
                // 直接修改input的value property，而非attribute
                const input1 = document.querySelectorAll(".el-input__inner")[3];
                const input2 = document.querySelectorAll(".el-input__inner")[4];
                if (input1) input1.value = "test";
                if (input2) input2.value = "test2";
            }
        }, 3000);
    }

    // 页面加载后初始化绑定
    setTimeout(bindNextButton, 3000);
}

额外优化点 #

• 用querySelector/querySelectorAll代替getElementsByClassName，返回静态集合，避免动态集合可能导致的元素引用问题
• 使用addEventListener绑定点击事件，不会覆盖Amelia插件原有按钮逻辑
• 增加元素存在性判断，避免DOM元素未加载完成时出现报错
• 移除重复的setAttribute('onclick')方式，这种方式会覆盖原有事件，导致插件内置逻辑失效

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