xmlhttprequest not posting to php file

Question

I hope this is not a duplicate...
I am trying to POST user email & password to a php file and it seems that the php file isn't getting those values.

The js code:


function ReceiveLoginData() {
    let text = this.responseText;
    console.log(text);
    let json_data = JSON.parse(
        text.substring(1, text.length - 1).replaceAll("\\u0022", "\"")
    );
    // there is a lot more code... but its irrelevant.

}


function SubmitLogin() {
    var email_addr = document.getElementsByClassName("login-email")[0].value;
    var passwd = document.getElementsByClassName("login-passwd")[0].value;

    var req = new XMLHttpRequest();
    req.onload = ReceiveLoginData;
    // req.onreadystatechange = ReceiveLoginData; // does not work...
    req.open("POST", "/users/auth/login.php"); // ...,true); or ...,false); fail too...
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    let data_to_send = "uemail=" +
        window.encodeURIComponent(email_addr) +
        "&upasswd=" +
        window.encodeURIComponent(passwd);

    // data_to_send = "uemail="+email_addr ... works neither

    req.send(data_to_send);
}

PHP (actually its location is localhost:4000/users/auth/login.php)

<?php
$uemail = $_POST["uemail"];
$upasswd = $_POST["upasswd"];
$login_err = true;
// set it to false otherwise


function SendData(string $str)
{
    echo json_encode($str, JSON_HEX_QUOT | JSON_HEX_APOS);
}

function main_fn()
{
    $uemail = strtolower($uemail);
    if (strlen($uemail) == 0) {
        SendData("[\"noemail\"]");
    }

    // and much more but again irrelevant...
}

main_fn();
?>

I learnt that using window.encodeURIComponent(...) is safer from here: https://stackoverflow.com/a/17382629/18243229
but neither of the ways work.

Whatever I got to know after literal 5 hours of debugging and getting fed up(I blame my noviceness):

The PHP form is being executed. ReceiveLoginData function prints ["noemail"] whenever the submit button is pressed
The Network debugging tab in chrome's dev tools shows that connection is established with php file. Some information which might just be useful:
- Response Headers (source):

    HTTP/1.1 200 OK
    Host: localhost:4000
    Date: Sun, 18 Sep 2022 16:59:49 GMT
    Connection: close
    X-Powered-By: PHP/8.1.10
    Content-type: text/html; charset=UTF-8

Request Headers (source):

POST /users/auth/login.php HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 31
Content-type: application/x-www-form-urlencoded
Host: localhost:4000
Origin: http://localhost:4000
Referer: http://localhost:4000/users/auth/auth.html?
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
sec-ch-ua: "Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"

Payload: (source | URL encoded)

uemail=email%40gmail.com&upasswd=1234

uemail: email%40gmail.com
upasswd: 1234

Response:

"[\u0022noemail\u0022]"

What else I did...

I didn't waste those 5 hours on this project...
I tried to remake a smaller project with the same mechanism and the same js code calling a PHP file and voila, the php file got the values posted to it...

Everything "seems" correct according to my knowledge but why does PHP not get the $_POST values?
Also, I'm currently focusing on Google Chrome and am on Linux (ig that makes no difference...)

In your `main_fn()`, you have `$uemail = strtolower($uemail);`, but at that point, there is no variable called `$uemail` in the scope of that function. In JS, global variables are accessible from within functions, but in PHP, they are not. You need to pass the values you want to use in the functions as function arguments. You should read up on the basics of PHP. You can read about variable scope in the manual: https://www.php.net/manual/en/language.variables.scope.php — M. Eriksson, Sep 18 '22 at 17:42
Another issue, you're manually building the serialized JSON response as a string, which you then json_encode(). That makes little sense. Create the structure you want as a PHP array: `SendData(['no email'])` and let `json_encode()` do the JSON serialization. That's literally what it's for. — M. Eriksson, Sep 18 '22 at 17:47

score 2 · Accepted Answer · answered Sep 18 '22 at 17:43

From the code you have posted i can spot one problem. the $uemail = $_POST["uemail"]; is in the global scope and the code inside the main_fn function is trying to use that variable but that variable is not available in that scope because it is only available in the global scope. So it seems to me you need to pass them as arguments to get them into the functions scope.

Changeing the function definition
from: function main_fn()
to: function main_fn($uemail, $upasswd)

and calling it with: main_fn($uemail, $upasswd);
instead of: main_fn();

should do the trick

Hope this helps :-)

That was a life saver! I am a bit accustomed to C & C++. Therefore, wanted to make the flow similar to them but I did not know about this behavior of global vars in php (its diff from C, ig there r many more things). Ik I should avoid comments of gratitude but I just cant keep it away. Thanks a lot! — 0xdead, Sep 18 '22 at 18:24

xmlhttprequest not posting to php file

Whatever I got to know after literal 5 hours of debugging and getting fed up(I blame my noviceness):

What else I did...

1 Answers1