Как обработать динамическую c добавленную html форму на NodeJS express

Question

Мой JQuery код добавляет форму html к DOM следующим образом.

 $("#form-container").empty().append("<form method='POST' action='/process-form' id='my-form'>
    <input name='myfield'>
    <button type='submit'>Submit</button>
</form>")

И мой код на стороне сервера выглядит следующим образом

   //I have app.use(bodyParser.urlencoded({extended: true}) middleware
   router.post('/process-form',function(req,res){
    console.log(req.body)
   })

Возвращается console.log пустой объект. Однако, когда я создаю новую страницу только с формой и отправляю форму, она возвращает значения формы, как и ожидалось. Любая помощь, почему он так себя ведет?

РЕДАКТИРОВАТЬ: JQuery код для AJAX запрос

$(document).on('submit', '#my-form', function(evt) {
        evt.preventDefault();
        let url = $(this).attr('action')
        let method = $(this).attr('post')
        $.ajax({
            url,
            type: 'POST',
            success: function(data) {
                console.log(data)

            },
            error: function(err) {
                console.log(err)
            }
        })
    })

Answer 1

Вы не отправляете данные с нашей Ajax записью. Вы должны получить данные из формы и отправить их себе для звонка Ajax.

Существует множество способов извлечь данные из формы и упаковать их для jQuery. Один из способов поместить его в форму с URL-кодом - это получить элемент DOM для формы и выполнить const formData = form.serialize(), а затем отправить его в свойство data для $.ajax().

. это:

$(document).on('submit', '#my-form', function(evt) {
    evt.preventDefault();
    let url = $(this).attr('action')
    let method = $(this).attr('post')
    $.ajax({
        url,
        type: 'POST',
        data: $(this).serialize(),
        success: function(data) {
            console.log(data)
        },
        error: function(err) {
            console.log(err)
        }
    })
});