Unable to execute php file using XMLHttpRequest

Question

I am creating a form, that on a button, calls a javascript file to submit the contents of the form to a php file. My issue is that this works on IE, and will not work on opera, google chrome, or firefox. On analyzing the console in google chrome, I get this error: (Note: I have shortened the localhost path and removed my ip address)

XMLHttpRequest cannot load http://localhost/browse-to-file.php.  No 'Access-Control-Allow-Origin' header is present on requested resource. Origin 'http://internal-ip-address' is therefore not allowed

Also, I have outputted the xmlHttpRequest() status codes as follows:

Ready State: 4
Status: 0

I am testing that the status should be 200.

Is there any easy way to fix this? I am completely lost here.

Edit:

I have found an error in my code, I was calling localhost, when I should have been using the relative path (duh). Now that that is fixed, I am getting another error.

Uncaught TypeError: Cannot set property 'innerHTML' of null
xmlHttp.onreadystatechange

My code is as follows:

xmlHttp = new XMLHttpRequest();

And then the part that is wrong:

  xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
        document.getElementById("result").innerHTML=xmlHttp.responseText;          
    } else{
        console.error("Ready State: " + xmlHttp.readyState)
        console.error("Status: " + xmlHttp.status)
        console.error("Status Text: " + xmlHttp.statusText);

        alert("An error has occured making the request")

    }
}

From the error it seems like you are trying to do a cross-domain request (which is disallowed by the browser). However it's a just a wild guess as you don't provide the actual request you are trying to make — milo5b, Mar 02 '14 at 19:01
If both the page you are making the request in and the PHP script are on the same domain, then use the same domain to make the request (or use a relative URL in the first place). If not, then look into CORS. — CBroe, Mar 02 '14 at 19:01

score 0 · Accepted Answer · answered Mar 02 '14 at 19:32

The answer was really quite simple. First I had to change the direct page from the 'localhost' to the actual ip address of my server. Then I realized that I was trying to get an Element ID of "result", this was not the correct ID. But it is weird that this did in fact work on IE10.

xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
    document.getElementById("result").innerHTML=xmlHttp.responseText;          
} else{
    console.error("Ready State: " + xmlHttp.readyState)
    console.error("Status: " + xmlHttp.status)
    console.error("Status Text: " + xmlHttp.statusText);

    alert("An error has occured making the request")

}
}

Upon changing the "result" above to the correct id, it works.

Unable to execute php file using XMLHttpRequest

1 Answers1