Retrieve let from Form

Questions
1

Hi There! First of all i would like to thank you all for the work done so far! Amazing.
I am just trying n8n since last week and there is one thing i cannot figure out…

I already implement a webhook and a set node in which i put a fx html. To make it simple something like :
…
title>Today’s Date/title>
button onclick=“myFunction()”>Click me</button
script>
function myFunction() {
let d = new Date();
alert("Today’s date is " + d);
}
</script

This is just an example but now i would like to push in n8n the “d” value when button is clicked but i cannot understand how…

Thank you all for your ideas!!

3

Hello,

You can call your webhook URL in JavaScript with xmlhttprequest.

Or you can send the d value in a form in a hidden input

4

thanks but how can i implement a xmlhttprequest with n8n?
what note to use in n8n?
for the second option ok i see but i would like to try the xmlhttprequest first
thx

5

You have to do it from your JavaScript function not from n8n.

N8N will received the value of d and make what you want with it (make the workflows that you want) but first you have to send it to n8n and use a http requests from your JS code

const req = new XMLHttpRequest();
req.open(“GET”, url);
req.send();

1 Like
6

More complicated that it seems to be…I still cannot make it works…
do you have any workflow example? thx
On my side I am going to restart from the beginning there is somethig wrong but i am too focus :exploding_head:

7

Hi @Dany, the code @Kent1 shared would pretty much do what you have in mind.

If you want to send your example d value to n8n you’d simply add it after your existing alert line and replace url with the webhook URL provided by n8n. Just make sure to include your d in the url, otherwise n8n would get an empty request of course.

As a complete HTML file it could look like so:

<!DOCTYPE html>
<html>
<head>

<script>
function myFunction()
{
  let d = new Date();

  const req = new XMLHttpRequest();
  req.open("GET", `http://localhost:5678/webhook-test/8d9767f9-6dc9-472b-93ab-bbcff3ba2a33?myValue=${d}`);
  req.send();

  alert("Today's date is " + d);

}
</script>
</head>

<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>

Now when executing my workflow and then clicking on “Click me”, n8n receives the following dataset including the d value:

image
image1492×808 74.8 KB

Hope this helps :slight_smile:

On a side note, when hosting n8n and your website under different domains also pay attention to CORS as your browser might not allow such requests by default.

2 Likes