getElementById return empty values so post empty values

I'm working with DOM and web API to POST some information about the company like name, worker's name.

But when I write something in the input DOM can't reach the value and return empty so I post an empty object.

That looks like :

1. adress: ""

2. companyName: ""

3. contactName: ""

4. contactTitle: ""

My form block:

<form>
        <div class="form-group">
          <label for="">Company Name</label>
          <input
            type="text"
            class="form-control"
            id="companyName"
            placeholder="Company Name!"
          />
        </div>
        <div class="form-group">
          <label for="">Contact Name</label>
          <input
            type="text"
            class="form-control"
            id="contactName"
            placeholder="Contact Name!"
            value=""
          />
        </div>
        <div class="form-group">
          <label for="">Contact Title</label>
          <input
            type="text"
            class="form-control"
            id="contactTitle"
            placeholder="Contact Title!"
          />
        </div>
        <div class="form-group">
          <label for="">Country</label>
          <input
            type="text"
            class="form-control"
            id="inputCountry"
            placeholder="Country!"
          />
        </div>
      </form>

And my JS code:

'use strict';

let inputCompanyName = document.getElementById('companyName');
let inputContactName = document.getElementById('contactName');
let inputContactTitle = document.getElementById('contactTitle');
let country = document.getElementById('inputCountry');

const btnSubmit = document.getElementById('submit');

let newCompany = {
  companyName: inputCompanyName.value,
  contactName: inputContactName.value,
  contactTitle: inputContactTitle.value,
  adress: country.value,
};

btnSubmit.addEventListener('click', e => {
  e.preventDefault();
  axios
    .post('https://northwind.vercel.app/api/suppliers', newCompany)
    .then(res => {
      console.log('Response', res.data);
      alert('Success!');
    });
});

I tried innerHTML and innerText and form method but I cant solve this problem.

You're reading the values immediately upon loading the page, long before the user has had a chance to enter any values.

Instead, read the values in the click event:

btnSubmit.addEventListener('click', e => {
  let newCompany = {
    companyName: inputCompanyName.value,
    contactName: inputContactName.value,
    contactTitle: inputContactTitle.value,
    adress: country.value,
  };
  // the rest of the click handler logic...
});