I am working on a Laravel project where the admin has the ability to modify user data through a form. I am trying to implement an AJAX submission for this form, but it is not working as expected.
Here is the form code:
<form id="userData{{$loop->iteration}}" method="POST">
@csrf
<!--some inputs-->
</form>
<button id="changeUserData{{$loop->iteration}}" data-id="#userData{{$loop->iteration}}">Save</button>
And here is the JavaScript code:
$("#changeUserData{{$loop->iteration}}").click(function (e) {
var ele = $(this);
var formId = ele.attr("data-id");
console.log(formId);
$(formId).submit(function (e){
console.log("test2");
e.preventDefault();
$.ajax({
url: '{{url('changeUserData')}}',
method: "PATCH",
data: $(formId).serialize(),
success: function(){
console.log("test");
}
})
})
});
Even though the first console log statement gets executed when the button is pressed, nothing else happens afterwards. I have verified that the formId matches the form id correctly, so I am unsure what could be causing the issue.