if you add <INPUT NAME=”token” value="blablabla” type=”hidden” /> it will send the token as a get parameter. But keep in mind your token is visible to everyone with access to your html page.
The html-form uses the post-action as required by the API, but adding this didn’t change the result.
<INPUT NAME=”token” value="blablabla” type=”hidden” />
I suppose that adding the token as above will result in a http (post) request body like:
{ "token": "blablabla", "p_schema": "okf", "p_table": "v_bydel" }
“blablabla” is obvioursly substituted with my API-key
I solved this with chatGPT. It made me a bit of javascript so the token could go into the http-request-header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Forms</title>
</head>
<body>
<h1>Sample Form 1</h1>
<form id="sampleForm1">
<label for="input1">Input 1:</label>
<input type="text" id="input1" name="input1" required><br><br>
<label for="input2">Input 2:</label>
<input type="text" id="input2" name="input2" required><br><br>
<button type="submit">Submit</button>
</form>
<h1>Sample Form 2</h1>
<form id="sampleForm2">
<label for="input3">Input 3:</label>
<input type="text" id="input3" name="input3" required><br><br>
<label for="input4">Input 4:</label>
<input type="text" id="input4" name="input4" required><br><br>
<button type="submit">Submit</button>
</form>
<script>
// Function to handle form submission
function handleFormSubmit(event, formId, nextPage) {
event.preventDefault(); // Prevent default form submission
const token = "your_auth_token_here";
const url = 'https://example.com/api/endpoint';
const formData = new FormData(document.getElementById(formId)); // Get form data
// Convert form data to JSON object
const postData = {};
formData.forEach((value, key) => {
postDataakey] = value;
});
// Options for the fetch request
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}` // Adding the token to the Authorization header
},
body: JSON.stringify(postData) // Convert the postData object to JSON string
};
// Making the fetch request
fetch(url, options)
.then(response => {
if (response.status === 202) { // Check for 202 Accepted status code
// Redirect to the next page after successful submission
window.location.href = nextPage;
} else {
throw new Error('Network response was not ok');
}
})
.catch(error => {
// Handle errors
console.error('There was a problem with the fetch operation:', error);
});
}
// Add event listeners to the forms
document.getElementById('sampleForm1').addEventListener('submit', function(event) {
handleFormSubmit(event, 'sampleForm1', 'nextstep.html');
});
document.getElementById('sampleForm2').addEventListener('submit', function(event) {
handleFormSubmit(event, 'sampleForm2', 'nextstep.html');
});
</script>
</body>
</html>