Making a post request using Javascript

Question

I'm trying to make a post request to a rest API with the data from a form in my HTML code. I want the form to be posted when I click the submit button, however when i click submit nothing happens. Can anyone help me with why this isn't working?

I want to avoid using jQuery if possible.

Any help will be appreciated, cheers

My form:

    <form id="input_form">Please enter details:
        <label for="name">Name: <input type="text" name="name" value="Name"></label>
        <label for="age">Age: <input type="text" name="age" value="Age"></label>

        <input type="submit" id="submit_button" value="Add User">
    </form>

My Javascript:

    const processResponse = function() {
        let response = JSON.parse(this.response);
        console.log(response);
    };

    const encodeParameters = function(params) {
        var strArray = [];
        Object.keys(params).forEach(function(key) {
            var paramString = encodeURIComponent(key) + "=" +                    encodeURIComponent(params[key]);
            strArray.push(paramString);
        });
        return strArray.join("&");
    };

    const makeAPIQuery = function(name, barcode) {
        let rootURL = "somewhere";

        let params = {
            name: name,
            age: age
        };

        let queryURL = rootURL + "?" + encodeParameters(params);
        console.log(queryURL);

        let xhttp = new XMLHttpRequest();
        xhttp.addEventListener("load", processResponse);
        xhttp.open("POST", queryURL, true);
        xhttp.send();
    };

    let submitButton = document.getElementById("submit_button");
    submitButton.addEventListener("click", function() {
        let name = document.getElementById("name").value;
        console.log(name);
        let barcode = document.getElementById("age").value;
        console.log(age);

        if (name && age) {
            makeAPIQuery(name, age);
        }
    });

Answer 1

First there is no element with id , you are trying to retrieve element with name property using document.getElementById , so change name property to id, and secondly when using ajax to submit form you need to prevent the default behavior using e.preventDefault

 const processResponse = function() { let response = JSON.parse(this.response); console.log(response); }; const encodeParameters = function(params) { var strArray = []; Object.keys(params).forEach(function(key) { var paramString = encodeURIComponent(key) + "=" + encodeURIComponent(params[key]); strArray.push(paramString); }); return strArray.join("&"); }; const makeAPIQuery = function(name, age) { let rootURL = "somewhere"; let params = { name: name, age: age }; let queryURL = rootURL + "?" + encodeParameters(params); console.log(queryURL); let xhttp = new XMLHttpRequest(); xhttp.addEventListener("load", processResponse); xhttp.open("POST", queryURL, true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send(); }; let submitButton = document.getElementById("submit_button"); submitButton.addEventListener("click", function(e) { e.preventDefault() let name = document.getElementById("name").value; console.log(name); let age = document.getElementById("age").value; if (name && age) { makeAPIQuery(name, age); } });

 <form id="input_form">Please enter details: <label for="name">Name: <input type="text" id="name" value="Name"></label> <label for="age">Age: <input type="text" id="age" value="Age"></label> <input type="submit" id="submit_button" value="Add User"> </form>