Get proper form id format that is loaded dynamically after ajax function

Question

I know that it is better to use delegation binding for any html elements that is dynamically added. This may be simple but I don't get the proper "id" of the form element.

$(document).on("submit", "form#add_education", function(e){
e.preventDefault();

        console.log($(this));
        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            data    : $(this).serialize(),
            dataType: 'json',
            success : function (json){

                    $('.view-educationsec').css('display','none');
                    $(this)[0].reset();
                    showEducation();

                    swal("Good job!", "Education saved successfully!", "success");
            },
            error: function(json){
                if (json.status === 422) {
                    // $("#errorMessage").text('There is an error occured. Please try again.');
                    swal("Something went wrong!", "Please contact the developer for this issue.", "error");
                } 

            }

        });


$("html").removeClass("no-scroll"); // para ma enable ang scroll sa browser

});

Console.log returns alright, but the ajax function will result to

"Uncaught TypeError: $(...)[0].reset is not a function"

I'm guessing that ajax is also not passing data to the controller because of the improper id format being used.

score 0 · Accepted Answer · answered Oct 28 '18 at 07:54

Already found an answer, guys. I just add a variable for form id and then apply it to the ones who are using it.

var form = $(this);

Final updated code

 $(document).on("submit", "form#add_education", function(e){
e.preventDefault();
var form = $(this);
$start_date = $("input[name=start_date]").val();
   $end_date = $("input[name=end_date]").val();


        console.log($(this));
        $.ajax({
            url     : form.attr('action'),
            type    : form.attr('method'),
            data    : form.serialize(),
            dataType: 'json',
            success : function (json){

                    $('.view-educationsec').css('display','none');
                    form[0].reset();
                    showEducation();

                    swal("Good job!", "Education saved successfully!", "success");
            },
            error: function(json){
                if (json.status === 422) {
                    // $("#errorMessage").text('There is an error occured. Please try again.');
                    swal("Something went wrong!", "Please contact the developer for this issue.", "error");
                } 

            }

        });


$("html").removeClass("no-scroll"); // para ma enable ang scroll sa browser


});

score 0 · Answer 2 · answered Oct 28 '18 at 07:56

0

The $(this) inside the AJAX call doesn't refer to the form element that fired the event. This question has a few possible solutions.

answered Oct 28 '18 at 07:56

Mav

1,087
1
15
37

I manage to solve it a while ago. Thanks for the answer though. Now I know the reason why it doesn't work – enrique Oct 28 '18 at 07:59

Get proper form id format that is loaded dynamically after ajax function

2 Answers2