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>

Answer 2

Try

<form method="POST" class="addItem" id="my-form-id">
    <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>

And the js function to be:

function addingItems(){
    xhttp.open("POST", items_url, true);
    var formData = new FormData( document.getElementById("my-form-id") );
    xhttp.send(formData);
}   

Now the FormData class is supported by most browsers, but if you are targeting some legacy browsers, you can try this:

function addingItems(){
    xhttp.open("POST", items_url, true);
    var input = document.getElementById("my-input-id");
    var inputData = encodeURIComponent(input.value);
    var postData = input.name + "=" + inputData;
    xhttp.send(postData);
} 

I don't know if the later will work as is, might have to debug a little.

Answer 3

Using type="submit" will cause the page to reload, you can change that behavior either by using type="button" or by using event.preventDefault(); in your addingItems() function. And then on the click of button you can call a function which will get your form data and send to your server Following are the links that you can follow to achieve your target. Using AJAX Using XMLHttpRequest