Skip to main content

Hi,

I am struggling to trigger a automation from a custom html-form. It seems that the post-action never gets to the automation in FME Flow. 

My html-page looks like this:

html-form

The html-code is this:

html-code

 

When I hit the eSubmit]-button I get a white page - no error - nothing is logged! I know the automation works because the API-page gives me this:
 

API-page
  1. What I think might be wrong is that on the API-page I have a Token - which I don’t have on my custom html-form! How do I add the token to the HTM-form?
  2. Another question is wheather the request body coming from the custom html-form is right since I don’t see it?  

Thanks in advance.

Regards Jakob

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 😉


costum=custom! 


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>

 


Reply