Javascript не передает данные из динамически сгенерированной формы

Question

Когда пользователь нажимает на кнопку, он загружает форму (#CtrlST) в пользовательский div.Затем пользователь заполняет форму и отправляет ее.Проблема в том, что она не может вызвать функцию ctrlst.onsubmit для обработки данных формы.Когда форма жестко запрограммирована, функция submit срабатывает хорошо.Тем не менее, динамически генерируемая форма не.Мне нужно, чтобы форма генерировалась динамически, так как остальная часть кода, которую мне нужно написать, должна работать точно так же.

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;
    };
}
};

Answer 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, с делегированием это будет легко.