When adding dynamic HTML elements, it is recommended to use delegation binding. However, I am encountering an issue with getting 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
});
The Console.log output is correct, however, when running the ajax function, I encounter an error:
"Uncaught TypeError: $(...)[0].reset is not a function"
This issue is likely due to the improper format of the id used in the ajax call, which may also be causing problems with passing data to the controller.