I am attempting to communicate with an API. I am first requesting a token then storing it. After it has been stored then the user is told to fill out a form and hit submit which will fetch a post request. My problem is right now, the request is being sent on page load and not on submit. Here is what i have so far.
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>
You can add a submit event listener on your form and make your fetch request inside the handler function.
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);
})
}