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-24 14:18:37Z

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.

Sajjad Ali · Accepted Answer · 2018-12-31 10:52:44Z

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

darth-coder · Accepted Answer · 2018-12-31 10:51:15Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions