Posting input field values to a server

Greetings, I am trying to figure out how to write a function that will post the data from input fields to a server. Any help will be appreciated.

There are a number of ways you could do this. From using the XMLHttpRequest API or the more modern Fetch API to using libraries like jQuery or Axios.

1 Like

I forgot to point out that I would like to use plain JS, but XMLHttpRequest sounds good. Could you show me a simple example how would this be done? Most of the XMLHttpsRequest tutorials show only data received from a server, not sent.

The Free Code Camp curriculum has a challenge covering posting using XMLHttpRequest, but since fetch is much simpler and is still vanilla JavaScript, I highly recommend reading about it in the link referenced by @bhensley.

1 Like

Thank you, I’ve been researching this fetch api for about an hour and I would be grateful if you could write a simple example for me(posting input values to a server).

What part do you not understand? We prefer not to just give solutions. We prefer you first try to write your own code and if you get stuck, explain (in detail) what you are struggling with.

let form = document.getElementById("form1");
let server = form.querySelectorAll("input[name = i4go_server]").values();
let postData = {
    fuseaction: "api.jsonPostCardEntry",
    i4go_accessblock: form.querySelectorAll("input[name=i4go_accessBlock]").values(),
    i4go_cardnumber: form.querySelectorAll("input[name=card_number]").values(),
    i4go_expirationmonth: form.querySelectorAll("input[name=exp_month]").values(),
    i4go_expirationyear: form.querySelectorAll("input[name=exp_year]").values(),
    i4go_cvv2code: form.querySelectorAll("input[name=cvc]").values(),
    i4go_streetaddress: form.querySelectorAll("input[name=address_line1]").values(),
    i4go_postalcode: form.querySelectorAll("input[name=address_zip]").values()
};

fetch(server, {
    method: 'POST', 
    body: JSON.stringify(postData), 
    headers:{
      'Content-Type': 'application/json'
    }
  }).then(res => res.json()) 
  .then(response => console.log('success:', JSON.stringify(response)))
  .catch(error => console.error('error:', error));

This is what I’ve come up with so far, according to my research this is the correct structure but I do not understand what does “headers” represent. All in all this is probably entirely wrong(this is my first time attempting to upload data to a server), I’m just trying to deal with a task.

First off, you’re doing a lot of querySelectorAll() calls. Is this intentional? Bare in mind that querySelectorAll will return a NodeList (to simplify- an array). Where as querySelector will return a node, if found; and in the case of multiple nodes matching the selector, it’ll return the first.

You’re then using an undefined values() method on these NodeLists. Is this defined elsewhere?

I am guessing you’re actually only wanting to pull single nodes, and get each of their values. That would look more like:

i4go_accessblock: form.querySelector('input[name="i4go_accessBlock"]').value

As for your question on headers- they are a fundamental element of HTTP. They define much about the request, including (as you referenced in your code), the content type. You don’t have to define them, though, if you don’t need or want to. You will likely be fine omitting the headers definition from your fetch call entirely, if you’re not expecting the content type to be defined at the server side.

1 Like

I actually haven’t figured out the way to replace jQuery val() function, that’s the reason for .values() being undefined. Anyway thanks for the headers explanation.