Javascript POST request not sending data

Question

function formValidation(){
    var userid = document.getElementById(usuario);
    var usermail = document.getElementById(correo);
    var userpassword = document.getElementById(contrasena);
    var userpasswordconfirm = document.getElementById(contrasena_conf)
    
    if (userpassword == userpasswordconfirm){
        var xhr = new XMLHttpRequest();
        var data = new FormData();
        data.append("Users", userid);
        data.append("Mail", usermail);
        data.append("pwd", userpassword);
        
        xhr.open("POST", URL, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify({
            value: data
        }));

    else{
        window.alert("Las contraseñas no coinciden");
        userpassword.focus();
        userpasswordconfirm.focus();
        return false;
    }
    }
    
}

API server is receiving {"value": {}} and it is supposed to receive the user information. I don't know exactly what to put in setRequestHeader. Hope you can help me, thanks in advance

Hi, you are sending a FormData to your server then I think you have to specify "application/x-www-form-urlencoded" as ContentType in "setRequestHeader". Change also JSON.stringify() with "data" only; you're sending FormData, not JSON — ale91, Jul 08 '22 at 12:06
Since you are using FormData, I think you do not have to JSON.stringify() it, but send the whole object and use the appropriate request header for form data. — Shilly, Jul 08 '22 at 12:06
@ale91 — FormData objects get encoded as multipart form data **with an unpredictable but mandatory boundary parameter**. They don't get URL encoded. — Quentin, Jul 08 '22 at 12:09
if you really need to send FromData as json, you can ... `value: Object.fromEntries(data.entries())` ... but why not jsut set `data = {key:value}` in the first place — Jaromanda X, Jul 08 '22 at 12:12
The easiest way to convert your form data to JSON is probably: `JSON.stringify(Object.fromEntries(new FormData(form)))` — 3limin4t0r, Jul 11 '22 at 13:42

score 0 · Accepted Answer · answered Jul 08 '22 at 12:05

Send the FormData object. Send only the FormData object. Do not try to be smarter than the browser about what the Content-Type of the FormData object is. Do not try to encode the data as JSON.

    xhr.open("POST", URL, true);
    // NO! xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(data);

Make sure the server side code that parses this request can handle multipart encoded form data.

    var userid = document.getElementById(usuario);

This almost certainly wants to be:

var userid = document.getElementById("usuario").value;

Where you:

use a string with the ID in it and not a variable (that probably has the element inside it and not the ID)
get the value from the element instead of the whole element

All of your fields are plain text, so you could send JSON, but then you would need to construct a plain object and not a FormData object (and your server-side code would been to be prepared for JSON).

score 0 · Answer 2 · answered Jul 08 '22 at 15:25

function formValidation(){
var userid = document.getElementById("usuario").value;
var usermail = document.getElementById("correo").value;
var userpassword = document.getElementById("contrasena").value;
var userpasswordconfirm = document.getElementById("contrasena_conf").value;
    
    if (userpassword != userpasswordconfirm){
       window.alert("Las contraseñas no coinciden");
       userpassword.focus();
       userpasswordconfirm.focus();
       return false;
    }

    else{
        var xhr = new XMLHttpRequest();
        var data = new FormData();
        data.append("User", userid);
        data.append("Mail", usermail);
        data.append("Pwd", userpassword);
    
    xhr.open("POST", URL, true);
    xhr.send(data);
    }
    
}

Thanks for helping this quickly, everything is working now. For those who asked, the backend code for the API:

@app.route("/route", methods=["POST"])
def add_new_user_data():
    username = request.form.get("User")
    usermail = request.form.get("Mail")
    userpwd = request.form.get("Pwd")

    print(username, usermail, userpwd)
    if username is None:
        return "The request is null", 400
    else:
        return "ok", 200

Javascript POST request not sending data

2 Answers2