Как POST значение поля ввода в javascript - PullRequest
Новая
       21

Как POST значение поля ввода в javascript

0 голосов
/ 05 февраля 2020

Сначала я пытаюсь установить входное значение как переменную 

window.onload = function() {
  let inputValue = document.getElementById("myInput").value;
  return inputValue;
};

Затем я хочу POST значение поля ввода с помощью вызова API: 

function getPost(inputValue) {
  return fetch("https://rel.ink/api/links/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      url: inputValue
    })
  }).then(res => res.json());
}

function tinyURL() {
  getPost()
    .then(data => {
      console.log("Success:", data);
    })
    .catch(error => {
      console.error("Error:", error);
    });
}

function addEventListener() {
  document.getElementById("postBtn").addEventListener("click", tinyURL);
}

Однако, значение не обрабатывается, так как вывод console.log: 

url: Array(1)
0: "This field is required."
length: 1

Вызов API успешен, но с входным значением что-то не так. Что я делаю не так?

1 Ответ

1 голос
/ 05 февраля 2020

Поскольку вы принимаете значение для window.onload, всегда вы передаете одно и то же начальное значение элемента , которое, вероятно, вам не нужно.

Вы должны объявить переменную в глобальной области видимости и обновить переменную на input event:

Изменить: 

window.onload = function() {
  let inputValue = document.getElementById("myInput").value;
  return inputValue;
};

На : 

let inputValue;
document.getElementById("myInput").addEventListener('input', function()
  inputValue = this.value;
});

ИЛИ: Вы можете напрямую установить текущее значение 

body: JSON.stringify({
  url: document.getElementById("myInput").value
})
...