I’m trying to make a chatroom like website. But I ran into a big problem relating to AJAX.
I have an empty div in the main page inside which I load all the messages that are found in the database using an XMLHttpRequest. It’s all fine so far as I managed to make it work well. But then I wanted to take things to the next level and create an Admin account that would be able to delete any posts in case they contain an inappropriate content. I have added an extra row inside the table that contains a form with a hidden text input which contains the id of the selected row. And I have a button on which I would click, and I would call a file that has the role of deleting the respective entry from the database,
I have tried to submit the form using a regular POST method inside the form without AJAX just to check if it works well on the database. And it works perfectly, so there are no problems in my mysql procedures file. But it refreshes the webpage and I want to avoid that, so AJAX is my only hope, but when I try to use AJAX it just won’t work. I believe this is mainly because the form that I use to delete the posts is in another file than the main body of my website.
I tried some different things but nothing seems to work.
I have noticed that there aren’t many resources regarding the issue I am facing, and I get it, what I want is a bit uncommon as AJAX is most often used to submit text/textarea inputs that are filled by the user and are in a single file. And I already did that myself, in the main page I have a textarea form that I can submit with AJAX without refreshing the page so I kind of understand how it works. But regarding the problem I am facing right now, no resource on the web has proved useful. This thread is the closest to what I am looking for: Submiting a form that is inside a div with AJAX but it doesn’t provide any solutions.
So I’ll post my code here:
The main body of the website is in the file Chatroom.php, here I have the XHR request:
<!DOCTYPE html>
<html>
<body>
function table2(){
const xhttp = new XMLHttpRequest();
xhttp.onload = function(){
document.getElementById("scrollchat").innerHTML = this.responseText;
}
xhttp.open("GET", "load_chat.php");
xhttp.send();
}
setInterval(function(){
table2();
}, 500);
<div id="scrollchat">
</div>
Which is nothing fancy just the classical code which works perfectly fine, the div that I am filling is:
<div id="scrollchat"> </div>
And then in the load_chat.php where I read the contents from the database I have a form that contains the ID of each message which is the following:
<?php
session_start();
//echo '12345';
$con = mysqli_connect('localhost', 'root', '');
mysqli_select_db($con, 'chatroom');
//echo $_SESSION['username1'];
$onlinevalue = 1;
$count = "SELECT * FROM mainchat";
$rows = mysqli_query($con, $count);
$number = mysqli_num_rows($rows);
?>
<table>
<?php
foreach($rows as $row) : ?>
<td>
$currentuser = $row["Username"];
echo $currentuser;
</td>
<td>
<form action="" id="deletepostform">
<input type="hidden" name="MessagedeleteID" value="<?php echo $row["ID"]; ?>" />
<button type="submit"> <b><span style="color:red">X</span></b></button>
</form>
</td>
<?php endforeach; ?>
</table>
What would be the best AJAX function that would allow me to submit a form that is returned by this function?
Back in my main page Chatroom.php I tried a lot of types of AJAX calls. What I tried last time is the following code:
document.getElementById('deletepostform').addEventListener('submit', function(event) { event.preventDefault(); // Prevent the default form submission
let xhr = new XMLHttpRequest();
let url = 'deletepost.php'; // Replace with your server endpoint
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Collect form data
let formData = new FormData(this);
let params = new URLSearchParams(formData).toString();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // Handle the response
}
};
xhr.send(params); // Send the request with the form data
});
And with this code I get the error
TypeError: Cannot read properties of null (reading ‘addEventListener’)
in the console. And I think this may happen because it doesn’t find the form in the main page.
Anything I try can’t submit it because it does not find the actual form in the page itself as it is loaded from somewhere else
