I'm having problem with ajax check my code

I'm having problem with ajax check my code
0

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

#2

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.

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


#3

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.


#4

One thing I do see which is a problem is:

var request = new XMLhttpRequest();

You need to capitalize the H in http.


#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);


#7

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.


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

#11

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.


#12

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);
  }
}