Hi, first of all, I want to apologize if my question isn't right for this forum.
I am currently working on a project which consists of a chatting website similar to google hangouts. I created a form in javascript destinated to write someone's name in and add him as a friend. I did that yesterday with an ajax request for the server-side and it worked just fine, but now it is ignoring my function and I don't know why.
My js code:
let body = document.getElementsByTagName("body")[0];
let mainList = document.createElement("div");
mainList.classList.add("mainList");
let addFriendForm = document.createElement("form");
addFriendForm.id = "FriendForm";
// The main problem is here
$('#FriendForm').submit(function(){
$.ajax({
url: '../letschat/Functions/createUserRelation.php',
type: 'POST'
});
});
// ^^
let addFriendField = document.createElement("input");
addFriendField.classList.add("addFriend");
addFriendField.placeholder = "Add a friend";
addFriendField.type = "text";
addFriendField.name = "addFriend";
addFriendField.autocomplete = "off";
addFriendForm.appendChild(addFriendField);
mainList.appendChild(addFriendForm);
body.appendChild(mainList);
Top comments (5)
Your URL looks suspicious. That looks like a file path, not an endpoint.
Hmm, I don't know, I think that the URL is correct. I am not receiving any errors in the browser. You can take a look at my repository github.com/Alex-dev02/letschat, the js code is in main js and the function is in Functions folder.
The problem is that it is ignoring the ajax request at all, no errors, I even tried to console.log a "Hi" message after $('#FriendForm').submit(function(){ and it didn't work.
It looks like you're querying with JQuery too soon. You haven't yet appended it to the DOM when you're trying to add the submit method to it.
Oh, I didn't think about that. I ended up by creating that form directly in html and query with jQuery. Now it's fine :). Thank you for the answer.