How do I submit form input data with POST request when button is clicked?

Question

So far, I have a basic form that gets 2 inputs. The submit button successfully adds the new record to the SQLite database but with the values from the input elements. I am definitely missing how to properly set this up in my JavaScript code but I just don't know how to implement it.

JavaScript

var xhttp = new XMLHttpRequest();

const items_url = "http://127.0.0.1:3000/items"

function addingItems(){
    xhttp.open("POST", items_url, true);
    // Value implementation here maybe...
    console.log("Form button has been clicked for item entry submission");
    console.log(xhttp);
    xhttp.send();
}   

HTML

<form method="POST" class="addItem">
    <input type="text" placeholder="Title" name="item_title" required>
    <input type="text" placeholder="Number" name="item_number" required>
    <button id="submitItem" type="submit" form="addItem" value="Submit" onclick="addingItems()">Submit</button>
</form>

Please let me know if you need more information.

Answer 1

You need to add FormData to ajax object in JavaScript:

var xhttp = new XMLHttpRequest();

const items_url = "http://127.0.0.1:3000/items"

function addingItems(){
    xhttp.open("POST", items_url, true);
    console.log("Form button has been clicked for item entry submission");
    console.log(xhttp);
    var form=new FormData()
    form.append("item_title",document.getElementsByName("item_title")[0].value)
    form.append("item_number",document.getElementsByName("item_number")[0].value)
    xhttp.send(form);
}

<form method="POST" class="addItem">
    <input type="text" placeholder="Title" name="item_title" required>
    <input type="text" placeholder="Number" name="item_number" required>
    <button id="submitItem" value="Submit" onclick="addingItems()">Submit</button>
</form>