提交表单后可以发起ajax调用吗？

Question

An ajax post request will be issued after form submission.

I want to call the ajax post after submission of the form.

But ajax call is issued before form submission, should I need to delay the ajax call? how to do that after form submission?

by submitting form I'm calling an add function to save data

$("#section-form").submit(function (e) {


    save_class_info();

});

function save_class_info() {

   var  action = 'saveclassinfo';


    var campus_info = {
        'campus_name': campus_name,
        'shift_name': shift_name,
        'medium_name': medium_name,
        'class_name': class_id,
        'teacher_id': teacher_id,
        'edit': 'false'
    };

    $.ajax({
        url: "/" + root + "/" + controller + "/" + action,
        type: "post",
        data: campus_info,
        success: function (response) {

            console.log('done');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }


    });
}

Answer 1

You need to disable default form submission behaviors by using preventDefault :

$("#section-form").submit(function (e) {
    e.preventDefault();
    save_class_info();
});

Answer 2

Try to prevent form submit.

$("#section-form").submit(function (e) {
    e.preventDefault();
    e.stopPropagation();
    save_class_info();
});

Answer 3

That was my mistake.During form submission I can't issue an ajax call because that page will be refreshed after submitting the form. So I've done the submission of the form through another ajax call and after that call, I've issued another ajax post cause I need the data from success of 1st ajax call.

Thanks all for letting me know the problem of my approach.