Sending form info via AJAX

JavaScript
1

Hi,

I have the following code which submits the form data correctly, however it does not display the success message:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
	if (xhttp.readyState == 4 && xhttp.status == 200) {
		document.getElementById("success").innerHTML = "Success!";
	}
};
xhttp.open("POST", "my-form.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(mydata);

Seems I am doing something wrong with the onreadystatechange part, and will appreciate if anyone can point out. Thanks.

2

What does the HTML the function is targeting look like?

3

I tried

alert("Success!");

instead of

document.getElementById("success").innerHTML = "Success!";

which didn’t display either. I am guessing there is something wrong with the IF statement.

4

Use the Network tab of your browser’s developer tools to check that you’re actually getting a 200 response from the server and not an error code.

5

Hi, just tested that and yes I’m getting a 200 response. As said earlier, the form submits with no issues, the section below seems to be not working:

xhttp.onreadystatechange = function() {
	if (xhttp.readyState == 4 && xhttp.status == 200) {
		alert("Success!");
	}
};
6

I tried the following:

xhttp.onreadystatechange = function () {
	alert(xhttp.readyState+", "+xhttp.status);
};

It displays, three alerts:

1,0
2,0
4,0

and in the network tab of the browser, I see 200 OK, and the form info is being submitted correctly.

What I understand is that when the readyState is 4, the status is still 0, hence my IF statement (in OP) doesn’t trigger. So, any ideas what to do to solve this?

7

Would you be able to share a copy of your my-form.php file? Also, what browser are you using?

8

I am testing in Firefox. I can’t share the whole file but basically it sends the form info via mail() as follows:

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	
	// Get form data
	...
	
	// Validate form data
	if (...) {
		...
		mail(...);
	}
}
?>

The form info is sent with no issues, just the xhttp.status is not returning as 200 as it should.

If you have any working code samples that does the job (sending form info via XMLHttpRequest), or if you could direct to any source, that might help me figure out what I am doing wrong. I just grabbed the code I found on W3Schools, which is not working in my case.

Thanks.

9

Sorry, I forgot to mention. The script I am posting is on another domain. Still, the script is doing its job and in Firefox Network tab I am seeing 200 OK. So, I don’t understand why the xhttp.status keeps returning as 0. Shall I just ignore it?

10

Ah, probably a cross-origin problem then… I’m surprised you’re not getting an error about that in the console. You’ll probably need to configure your PHP script to send the relevant CORS headers.

11

I’m not getting an error in the console (maybe) because the form is being posted. Thanks, I will check what CORS headers are.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.