Javascript not submitting data from a dynamically generated form

Question

When a user clicks on a button it loads a form (#CtrlST) into the usercontent div. Then the user fills out the form and submits it. The issue is that it is not able to trigger the ctrlst.onsubmit function to process the form data. When the form is hard coded, the submit function fires nicely. However, the dynamically generated form doesn't. I need the form to be dynamically generated as the rest of the code I need to write needs work in the same way.

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

Actually if you are attaching event to the DOM, that DOM object should be available already. So your first case with hard coded form is working properly.

For the second case if you are injecting the Form related DOM dynamically, event also should be attached after that HTML injection.

Modified your code as follows to attach submit event dynamically, This will work for your case,

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

There is one more concept called delegation for such kind of dynamic elements event handling, please go through for your reference. If you use JQuery, it will be easy with delegation.