I'm having problem with ajax check my code

General
1

This is my code. Is there any problem with this code below?

		<script type="text/javascript">
			function sendChat(){
				if(chatform.username.value == "" || chatform.message.value == ""){
				alert("All fields are require!");
			}else{
		var username = chatform.username.value;
		var message = chatform.message.value;
				var request = new XMLhttpRequest();
				
				request.onreadystatechange = function(){
					if(request.readyState==4&&request.status==200){
						document.getElementById('chatbox').innerHTML = request.responseText;
					}
				}
				request.open('GET','third_method.php?username='+username+'&message='+message,true);
				request.send();
			}
			}
		</script>
3

As @camperextraordinaire said, seing your HTML will help too.

Also, are you getting any errors in your browser error console? Seeing those would also be helpful.

5

I’m not familiar with XMLHttpRequest as I use fetch, but if you are sending form data to a server, you should be using POST.

6

But sir i taught the error is coming from the open statement
request.open(‘GET’,‘third_method.php?username=’+username+’&message=’+message,true);

8

Okay no problem, let me change the H and see what will come up

9

Sir, the code is not still working, and this is my entire ajax file code.

page title .form-div-element{ width: 50%; height: 150px; background-color: #F8FFF3; border: 8px solid #F8FFF3; box-shadow: 8px 8px 8px 8px black; } #chatbox{ width: 50%; height: 250px; border: 8px solid #F8FFF3; box-shadow: 8px 8px 8px 8px black; } 
	</style>

	<script type="text/javascript">
		function sendChat(){
			if(chatform.username.value == "" || chatform.message.value == ""){
			alert("All fields are require!");
		}else{
			var username = chatform.username.value;
			var message = chatform.message.value;
			var request = new XMLHttpRequest();
			
			request.onreadystatechange = function(){
				if(request.readyState==4&&request.status==200){
					document.getElementById('chatbox').innerHTML = request.responseText;
				}
			}
			request.open('GET','insert.php?username='+username+'&message='+message,true);
			request.send();
		}
		}
	</script>

</div>
<!-- The end of the chatbox div element -->
<div class="form-div-element">
	<form name="chatform">
		<label>Enter username</label><br />
		<input type="text" name="username" /><br /><br />
		<label>Enter message</label><br />
		<textarea name="message" rows="2" cols="21"></textarea><br />
		<button onclick="sendChat()">send</button>
	</form>
</div>
<!-- The form div element end here -->
10

While this is my insert.php code file,

<?php $username = $_POST['username']; $message = $_POST['message']; $mydbc = new mysqli("localhost", "root", "", "usersdatabase"); $int = "INSERT INTO chat (username,message) VALUES('$username','$message')"; //Select item from chat table $slt = "SELECT * FROM chat"; $query = mysqli_query($mydbc,$slt); //If the above select statement happen then do what i have in bracket while($row = mysqli_fetch_assoc($query)){ echo $row['username']; echo "
"; echo $row['message']; } ?>