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.

FZs · Accepted Answer · 2019-09-24T14:18:37.900

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>

Thanks. I have implemented the above but have now encountered this error upon clicking "Submit": `Error response Error code: 501 Message: Unsupported method ('POST'). Error code explanation: HTTPStatus.NOT_IMPLEMENTED - Server does not support this operation.` — AelaHuntress, Dec 31 '18 at 12:51

score 1 · Answer 2 · answered Dec 31 '18 at 10:52

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

score 0 · Answer 3 · answered Dec 31 '18 at 10:51

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.

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

3 Answers3