I'm having problem with ajax check my code

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>

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

What problem are you experiencing? Can you post your html code here also?

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

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

One thing I do see which is a problem is:

var request = new XMLhttpRequest();

You need to capitalize the H in http.

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.

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

There could be other errors, but I know the typo in XMLhttpRequest will definitely result in an error. When you are ready to post more of your code, we can dig deeper into other potential problems.

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

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 -->

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']; } ?>

Can you please edit your posts and put three back ticks on the line before and the line after the code sections? I explained how to do this in a previous reply after fixing it the first time. You will get much faster responses from other campers when the code shows in its original format. Thanks.

Try changing your buttons onclick to:

<button onclick="sendChat(); return false;">send</button>

and change your sendChat function to:

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('POST', 'insert.php', true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send('username=' + username + '&message=' + message);
  }
}