Dynamic Javascript form input not POSTing

Question

I am working on a web application using the python-flask framework.

A trouble I am having is on a form where the user can create new input fields. The forms appear in the HTML code, and visually appear in the browser, however the elements that are created dynamically do not appear in the POST request.

Below is two javascript functions, the first creates the form element when the user pushes the appropriate button. The second code I found online, because it said that the serialize would add the Dynamic form elements to the POST request.

$(function create_new_row_plus_button_fn() {
$("#addRows").click(function () {
            counter = counter + "a";
            var trelem = document.createElement('tr');
            var tdelem = document.createElement('td');
            trelem.appendChild(tdelem);
            var frm = document.getElementById("new_table_id");
            var newEl = document.createElement("input");
            newEl.name = counter;
            newEl.type = "text";
            tdelem.appendChild(newEl);
            frm.appendChild(trelem);
    });
})

$('#form_container').on('submit', function(e) {
    //prevent the default submithandling
    e.preventDefault();
    //send the data of 'this' (the matched form) to yourURL
    $.post('/add_new_product', $(this).serialize());
    location.reload();
});

One thing that I notice is that if I view html from the chrome debugger, the dynamic form elements are viewable, but if I look at the page source they are not.

Answer 1

The problem occurred from having the element inside of the . Moving the outside the fixed the issue.