Динамический ввод формы Javascript не POSTing

Question

Я работаю над веб-приложением, использующим инфраструктуру python-flask.

Проблема, с которой я столкнулся, связана с формой, в которой пользователь может создавать новые поля ввода.Формы отображаются в коде HTML и визуально отображаются в браузере, однако элементы, которые создаются динамически, не отображаются в запросе POST.

Ниже представлены две функции JavaScript, первая создает элемент формы, когда пользователь нажимает соответствующую кнопку.Второй код, который я нашел в сети, потому что он сказал, что сериализация добавит элементы формы Dynamic в запрос POST.

$(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();
});

Одна вещь, которую я замечаю, это то, что если я просматриваю html из отладчика chrome,динамические элементы формы доступны для просмотра, но если я посмотрю на исходный код страницы, то это не так.

Answer 1

Проблема возникла из-за наличия элемента внутри.Перемещение снаружи решило проблему.