AJAX post onclick

Question

I am trying to figure out why I get the result I do when I post with my ajax code.

As you can see, on most things in my form I use onchange="mySubmit(this.form)" or onclick="mySubmit(this.form)" to submit my form with ajax, so this works for the input elements, it returns all the right divs and stuff into my div that is supposed to show all the data thats returned.

However, in my

at the bottom of the formI also have onclick="mySubmit(this.form)", but it doesn't work, it for some reason displays my whole page inside the div that will display my data, which imo is quite weird, can I somehow post onclick any other way with my

?

HTML code :

JS Ajax code:

function mySubmit(theForm) {
    $.ajax({ // create an AJAX call...
        data: $(theForm).serialize(), // get the form data
        type: $(theForm).attr('method'), // GET or POST
        url: $(theForm).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#here').html(response); // update the DIV
        }
    });
}

Bourbia Brahim · Accepted Answer

This is because in the li this last refer to element it self and this last does not have form attribute which results undefined .

Replace all your onchange/onclick="mySubmit(this.form) by onchange/onclick="mySubmit(this); and also change your mySubmit function to :

function mySubmit(theForm) {
    theForm = $(theForm).closest("form");
    $.ajax({ // create an AJAX call...
        data: $(theForm).serialize(), // get the form data
        type: $(theForm).attr('method'), // GET or POST
        url: $(theForm).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#here').html(response); // update the DIV
        }
    });
}

above sample snippet :

function mySubmit(theForm) {
        console.log($(theForm).closest("form").attr("action"));
}

AJAX post onclick

Answers (1)

Related Questions