Нет отправки запроса ajax при отправке формы через jquery

Question

Я пытаюсь отправить свою форму на сервер. Я использовал pug для создания формы, а затем отправляю ее через ajax. Я написал тестовый журнал консоли, чтобы увидеть, отправляется ли форма, а сообщение не регистрируется. Что пошло не так?

Однако все, что я ввел в форму, появляется в URL после? Кроме того, почему не выполняется отправка запроса?

Моя форма: -

form(id="newProductForm")
            p
                label(for="title") Product Title:
                input(type="text" name="title" id="title" placeholder="Product Title" required autofocus)
            p
                label(for="description") Product Description:
                input(type="text" name="description" id="description" placeholder="Product Description" required autofocus)
            p
                label(for="Price") Price: 
                input(type="price" name="price" id="price" placeholder="Set Price" required autofocus)
            p
                label(for="Price") Shipping Charges: 
                input(type="text" name="shippingCharge" id="shippingCharge" placeholder="Set Shipping Charges" required autofocus)
            p
                label(for="Price") Shipping Time: 
                input(type="text" name="shippingTime" id="shippingTime" placeholder="Set Shipping Time" required autofocus)
            p
                label(for="quantity") Total Quantity: 
                input(type="text" name="quantity" id="quantity" placeholder="Set Total Quantity" required autofocus)
            p
                label(for="tags") Tags (Seperated by comma): 
                input(type="text" name="tags" id="tags" placeholder="Set Price" required autofocus)
            //Add drag and drop image upload feature soon

            p
                button(type="submit" id="addProductButton") Add New product

Мой код JS для отправки формы: -

    $(document).ready( function () {
    getAllProducts();

    $('#newProductForm').submit( function(e) {
        e.preventDefault();
        let arr = $(this).serializeArray();
        console.log("Form values: "+ arr);

        $.post({
            url: '/admin/add',
            type: 'POST',
        }).done( response => {
            resetProductTable();
            console.log("Admin add is being requested!")
        })
    })
})

Answer 1

Я думаю, что ваша форма не отправляется правильно? Вы можете использовать этот метод, я думаю, что ваша проблема должна быть решена.

$(document).submit('#newProductForm'', function (e) {
)}

Answer 2

изменить инициирующее событие отправки на

$(document).on('click', '#addProductButton', ()={
...
}):

, это связывает событие непосредственно с помощью кнопки sumbit.

Answer 3

Ваша кнопка отправки определяется как <button>

p
  button(type="submit" id="addProductButton") Add New product

, и я считаю, что это должен быть <input>, который вы могли бы назвать кнопкой по своему вкусу:

p
  input(type="submit" id="addProductButton") Add New product