动态生成表单

Posted 2023-03-20

参考技术A 项目有个需求，需要大量创建表单，实现数据的增删改查。于是思考有没有什么复用性高的解决方法。分析发现，可通过子组件和传入的数据实现。
（1）通过传入的数据动态生成table列表，用于数据展示：
也就是写一个子组件

（2）添加修改数据表单：

Javascript未从动态生成的表单提交数据

【中文标题】Javascript未从动态生成的表单提交数据

【英文标题】：Javascript not submitting data from a dynamically generated form

【发布时间】：2018-10-15 18:12:44

【问题描述】：

当用户单击按钮时，它会将表单 (#CtrlST) 加载到用户内容 div 中。然后用户填写表单并提交。问题是它无法触发 ctrlst.onsubmit 函数来处理表单数据。当表单被硬编码时，提交函数会很好地触发。但是，动态生成的表单不会。我需要动态生成表单，因为我需要编写的其余代码需要以相同的方式工作。

window.onload = function() 
// Get references to elements on the page.
var StartGB = document.getElementById('StartGB');
var socketStatus = document.getElementById('usercontent');
var ctrlst = document.getElementById('CtrlST');
var mySocket = new WebSocket("ws://0.0.0.0:5678/");

if (StartGB) 
    StartGB.addEventListener("click", function (e) 
        var gbform = document.getElementById('usercontent');
        gbform.insertAdjacentHTML('afterbegin','\n<form class="CST" id="CtrlST" action="#" method="post">\n'+
        '<div class="grid-container-plus">\n'+
        '<div class="grid-item"><input id="goodreads" name="goodreads" placeholder="Good"></div>\n'+
        '<div class="grid-item"><input id="badreads" name="badreads" placeholder="Bad"></div>\n'+
        '<div class="grid-item"><button type="submit" class="sbutton">&laquo; Start &raquo;</button></div>\n'+
        '</div>\n'+
        '</form>\n');
    )



if (ctrlst) 
    alert('wtf')
    // Send a message when the form is submitted.
    ctrlst.onsubmit = function(e) 
        e.preventDefault();
        // Retrieve the message from the Good /Bad form.
        var message = good.value + ':' + bad.value;
        // Send the message through the WebSocket.
        alert(message);
        mySocket.send(message);
        // Add the message to the messages list.
        socketStatus.innerHTML += '<div class="received">' + message + '</div>';
        return false;
    ;

;

【问题讨论】：

var ctrlst = document.getElementById('CtrlST') 的值是多少？它似乎是null，因为只有在您单击StartGB 后，具有此id 的表单才会插入到DOM 中。当 DOM 中还没有带有 id="CtrlST" 的表单时，在窗口加载时评估第二个 if 条件。

【参考方案1】：

实际上，如果您将事件附加到 DOM，则该 DOM 对象应该已经可用。所以你的第一个硬编码形式的案例工作正常。

对于第二种情况，如果您要动态注入与表单相关的 DOM，则还应在 HTML 注入之后附加事件。

如下修改您的代码以动态附加提交事件，这将适用于您的情况，

window.onload = function() 
// Get references to elements on the page.
var StartGB = document.getElementById('StartGB');
var socketStatus = document.getElementById('usercontent');
var mySocket = null; //new WebSocket("ws://0.0.0.0:5678/");

if (StartGB) 
    StartGB.addEventListener("click", function (e) 
        var gbform = document.getElementById('usercontent');
        gbform.insertAdjacentHTML('afterbegin','\n<form class="CST" id="CtrlST" action="#" method="post">\n'+
        '<div class="grid-container-plus">\n'+
        '<div class="grid-item"><input id="good" name="goodreads" placeholder="Good"></div>\n'+
        '<div class="grid-item"><input id="bad" name="badreads" placeholder="Bad"></div>\n'+
        '<div class="grid-item"><button type="submit" class="sbutton">&laquo; Start &raquo;</button></div>\n'+
        '</div>\n'+
        '</form>\n');
        addSubmitEvent();
    )


addSubmitEvent();
;
function addSubmitEvent()
var ctrlst = document.getElementById('CtrlST');
if (ctrlst) 
    alert('wtf')
    // Send a message when the form is submitted.
    ctrlst.onsubmit = function(e) 
        e.preventDefault();
        // Retrieve the message from the Good /Bad form.
        var message = good.value + ':' + bad.value;
        // Send the message through the WebSocket.
        alert(message);
        mySocket.send(message);
        // Add the message to the messages list.
        socketStatus.innerHTML += '<div class="received">' + message + '</div>';
        return false;
    ;

对于这种动态元素的事件处理，还有一个概念叫做委托，请参考。 如果你使用 JQuery，委托会很容易。

【讨论】：

我确实使用了 JQuery，但出于“原因”想走纯 JavaScript 路线。一旦我对它的工作原理有了更好的理解，我可能会将其转换为 JQuery。为什么要更改 new WebSocket("ws://0.0.0.0:5678/");到 var mySocket = null;?

@Ken Tuck，对不起，它被设为 null 仅用于测试，请忽略它。

不用担心。我最终本能地忽略了它并且它起作用了。