Как отправить запрос на получение, когда форма заполнена?

Question

Я пытаюсь связаться с API. Сначала я запрашиваю токен, затем сохраняю его. После того, как он был сохранен, пользователю предлагается заполнить форму и нажать «Отправить», которая получит запрос на публикацию. Моя проблема сейчас, запрос отправляется при загрузке страницы, а не при отправке. Вот что у меня есть.

JS:

var cred = { email: "xxxxx@xxxx.xxx", password: "xxxxx" };
var credJSON = JSON.stringify(cred);

    fetch('https://app.bl.ink/api/v3/access_token', {
        method: 'POST',
        body: credJSON,
        headers: {
            'Content-Type': 'application/json'
        }

    }).then(function (resp) {
        return resp.json();

    }).then(function (data) {
        var blink_token = data.access_token ;
        var linkInfo = { url: document.getElementById('url').value, alias: document.getElementById('alias').value };
        var linkInfoJSON = JSON.stringify(linkInfo);

        fetch('https://app.bl.ink/api/v3/2070/links', {
        method: 'POST',
        body: linkInfoJSON,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + blink_token
        }

    }).then(function (resp) {
        return resp.json();

    }).then(function (data) {
        console.log(data);

    })

    }).catch(function (err) {
        console.log('something went wrong', err);
    });

HTML

<form>
  Desired Long URL:<br>
  <input type="text" name="url" id="url"> 
  Desired Short URL:<br>
  <input type="text" name="alias" id="alias"><br>
  <input type="submit" value="Submit">
</form> 
</body>

Answer 1

Я думаю, что ваша проблема возникает при отправке формы, которая заключается в перезагрузке страницы
использование event.preventDefault

в коде это выглядит так:

<form id="my-form">
  Desired Long URL:<br>
  <input type="text" name="url" > 
  Desired Short URL:<br>
  <input type="text" name="alias" ><br>
  <button type="submit" >Submit </button>
</form> 

const myForm = document.getElementById('my-form');
myForm.onsubmit = evt =>  {
    evt.preventDefault(); // disable page reload
    data = { 
        url: myForm.url.value, 
        alias: myForm.alias.value 
    };
    ...
};

Answer 2

Вы можете добавить прослушиватель событий submit в форму и сделать запрос на выборку внутри функции обработчика.

var cred = { email: "xxxxx@xxxx.xxx", password: "xxxxx" };
var credJSON = JSON.stringify(cred);

document.querySelector('form').addEventListener('submit', fetchRequest);

function fetchRequest(event) {
    event.preventDefault(); // as Mr. Jojo rightly pointed out (thanks to him)
    fetch('https://app.bl.ink/api/v3/access_token', {
        method: 'POST',
        body: credJSON,
        headers: {
            'Content-Type': 'application/json'
        }

    }).then(function (resp) {
        return resp.json();

    }).then(function (data) {
        var blink_token = data.access_token ;
        var linkInfo = { url: document.getElementById('url').value, alias: document.getElementById('alias').value };
        var linkInfoJSON = JSON.stringify(linkInfo);

        fetch('https://app.bl.ink/api/v3/2070/links', {
        method: 'POST',
        body: linkInfoJSON,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + blink_token
        }

    }).then(function (resp) {
        return resp.json();

    }).then(function (data) {
        console.log(data);

    })

    }).catch(function (err) {
        console.log('something went wrong', err);
    })
}