CODEWITHSUNDEEP
javascriptjqueryhtmlajaxsubmit
Manuel Gonçalves
Manuel Gonçalves

Reputation: 79

Ajax .done() not detecting form.submit

I'm appending a form from another file with ajax, it is a regular form that is triggered by and onclick event that is this one:

<a href="javascript:void(0);" class="remitir" title="Reemitir Solicitud" data-id="'.$value['idsolicitud'].'"><i class="fas fa-lg fa-retweet"></i></a>

and the jquery behind it is: 

$('.remitir').on('click', function (e) {
        e.preventDefault();
        var id = $(this).data('id');
        remiteSolicitud(id);
    });

and here is the AJAX code

function remiteSolicitud(x){
$.ajax({
        type: 'POST',
        url: 'anotherFile/',
        data: { id: x },
        cache: false,
        beforeSend: function () {
            $(".page-loader-wrapper").fadeIn();
        },
        success: function (e) {
            $('#myModal').modal('show');
            $('.modal-body').html(e);
        },
        complete: function () {
            $(".page-loader-wrapper").fadeOut();
        }
    }).done(function () {
        $("#formID").submit(function (event) {
            alert("Handler for .submit() called.");
            event.preventDefault();
        });

    });
}

Now the problem I'm having is that the .done() function is not detecting when I submit the form and it realoads the page.

does anyone have any ideas what could it be? I have the exactly same code in another file and it works.

Upvotes: 2

Views: 57

Answers (2)

step
step

Reputation: 2410

Just do submit form event which call ajax.

$("body").on("submit", "#formID", function (event) {
    event.preventDefault();
    //put your ajax call here

    alert("Handler for .submit() called.");
});

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You don't need to attach the event in your callback just attach it before performing the request.

I'm appending a form from another file with ajax

So you need to use the event delegation .on() because your form is added dynamically to the DOM :

$("body").on("submit", "#formID", function (event) {
    event.preventDefault();

    alert("Handler for .submit() called.");
});

$.ajax({
    type: 'POST',
    url: 'anotherFile/',
    data: { id: x },
    cache: false,
    beforeSend: function () {
        $(".page-loader-wrapper").fadeIn();
    },
    success: function (e) {
        $('#myModal').modal('show');
        $('.modal-body').html(e);
    },
    complete: function () {
        $(".page-loader-wrapper").fadeOut();
    }
});

Upvotes: 1

Related Questions