CODEWITHSUNDEEP
javascriptjqueryajax
killerprince182
killerprince182

Reputation: 465

No ajax post request when submitting form through jquery

I am trying to submit my form to the server. I have used pug to create my form and then I am submitting it through the ajax. I have written a test console log to see if the form is being submitted and the message is not being logged. What went wrong?

However, whatever I inputted on the form is appearing in the url after ?. Also, why isn't post request being made?

My form: -

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

My JS code for submitting the form: -

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

Upvotes: 1

Views: 68

Answers (3)

Rafdro
Rafdro

Reputation: 790

change triggering submit event into 

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

this binds event directly with the sumbit button instead.

Upvotes: 1

Ahir Chetan
Ahir Chetan

Reputation: 42

I think your form do not submit right? You can used this method, I think your problem should be solve it.

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

Upvotes: 3

kubak
kubak

Reputation: 163

Your submit button is defined as <button>

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

and I believe it should be an <input>, which you could style as a button to your liking:

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

Upvotes: 1

Related Questions