HTML 表单无法使用 JavaScript 插入的数据（WordPress、NinjaForms）答案

【问题标题】：HTML Form can't use data inserted by JavaScript (WordPress, NinjaForms)HTML 表单无法使用 JavaScript 插入的数据（WordPress、NinjaForms）
【发布时间】：2021-10-01 14:21:24
【问题描述】：

对于上下文：表单是由 WordPress 驱动的网站中的 NinjaForms 插件创建的。

当页面完成加载时，此 JavaScript 成功地将值插入到必填字段中。确实需要几次尝试才能找到 input#insertOrderId 元素。当用户提交表单时，该字段被标记为空，即使您可以清楚地看到它已被填写。如果用户手动对字段进行编辑，表单将提交。

我得出的结论是，当此 JavaScript 插入表单时，该表单无法访问 input#insertOrderId 的值。

为什么会这样？或者，发生了什么？

document.addEventListener('DOMContentLoaded', (event) => {
    const urlParams = new URLSearchParams(window.location.search);
    const orderId = urlParams.get('order_id');

    /**
     * re-run querySelector until the element is found
     */
    function pollDOM () {
        let orderIdField = document.querySelector('input#insertOrderId');

        if ( orderIdField === null ) {
            setTimeout(pollDOM, 300);
        } else {
            if ( orderId ) {
                orderIdField.setAttribute('value', orderId);
            }
        }
    }

    pollDOM();

});

【问题讨论】：

表单元素是否也是动态添加的，否则您必须轮询它的存在似乎很奇怪？

标签： javascript html wordpress forms

【解决方案1】：

除了setAttribute 或许还可以试试EventTarget.dispatchEvent

例如

orderIdField.dispatchEvent(new Event("change"))

也许代码使用了onchange 处理程序。
如果你只设置了value 属性，就没有onchange 事件，所以什么都没有发生。

document.getElementById("unique").onchange = () => {
   document.getElementsByTagName("var")[0].innerText++
}

function setValue () {
   document.getElementById("unique").value = "999999"
}

<label for="unique">
   Try editing the form input:
   <input id="unique" />
</label>

<button type="button" onclick="setValue()">
  Set value to "999999"
</button>

<p><code>onchange</code> count: <var>0</var></p>

【讨论】：