I have a question about how to send data to websites

Hello, so I want to make on a website (A) a button where you insert a number and on another website (B) a div is created with the number you input. My question is what should I look into/learn to do that? I know HTML, CSS, JS. The websites will be hosted online. Thank you.

More context:

I wanna make a website for a restaurant's menu and include a "call a waiter" button, and my idea is to have a tablet in the waiter's area where when a customer clicks and inputs their table a

is created on the waiter's website with the table number.

Comments

[Juan F Gonzalez]

To create a button that interacts with another website through inputs supplied by a user, you can use your HTML, CSS, JS skills.

You first need to create the button on the first website. And you'll have to bind it to an input within a form. This way, the user enters the number, hits the button, and the data is sent to the other website.

You can use something like this:

  <form id="numberForm">
      <label for="numberInput">Enter a number:</label><br>
      <input type="number" id="numberInput" name="numberInput"><br>
      <input type="submit" value="Submit">
  </form>

Now, you'll need to handle the numeric submission using JS. There are many ways and frameworks to do that.

The simplest way would be to use vanilla JS and the Fetch API to send a POST to the server of the second site that would be receiving the number.

Something like this can help:

  document.getElementById('numberForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var number = document.getElementById('numberInput').value;
      fetch('https://second-website.com/createDiv', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({ number: number })
      });
  });

The server of the second website is the one that would be listening for incoming requests and when it receives the number then it will call a function that will create a div with the number received.

That part is highly dependent on how the websites are built and what does the server uses to listen for requests and makes changes according to information.

But you can use Node and Express to create a server using JS that exposes an specific endpoint that the first website can call and send the number from the user.

This is a very simplified example but I hope it gives you some ideas about how you can make that happen.

[Paul]

In my search I found out about what the first website should do, however how can I make the website "watch out" for POSTs sent by the first website? That's the part I can't find out what I need to learn to do. You advice that I should look into Node to do that? Thank you.

[Ross Angus]

The method outlined by @juanfrank77 concerns the sending of the information via the POST method. Personally, I'd just use standard HTML for that task:

<form id="numberForm" method="post" action="https://your-second-website-url-goes-here.test/">
      <label for="numberInput">Enter a number:</label><br>
      <input type="number" id="numberInput" name="numberInput"><br>
      <input type="submit" value="Submit">
</form>

... but that's just me.

In terms of receiving that data and processing it, some form of server-side language would be requited. JavaScript running in the browser is sandboxed so cannot do this, however, as @juanfrank77 points out, when JavaScript runs on the server (in the form of Node.js), then this becomes possible. Note that Node is just one of many languages which could do this, for example .NET, PHP. Perl, if you're feeling nostalgic...

This is probably overkill, but a framework such as Next.js (which encompasses JavaScript, Node and React) is one way to achieve this. But that's a lot to learn!

[Ross Angus]

It occurs to me in hindsight that I was massively overthinking this - it's perfectly possible to pass data from one page to another via the querystring, and intercept that using JavaScript on the target site. Note, however, that this is not a secure means of passing data and should not be used for private information. Let's return to our form on web site A:

<form method="get" action="https://your-second-website-url-goes-here.test/">
   <label for="numberInput">Enter a number:</label><br>
   <input type="number" id="numberInput" name="numberInput"><br>
   <input type="submit" value="Submit">
</form>

Note that the method has changed from post to get inside the form tag. This will convert the user input inside the form into a querystring, which will take the form:

https://your-second-website-url-goes-here.test/?numberInput=5

(assuming the user types 5 into the input field)

Getting the values from a querystring has multiple solutions (I have to admit, I've not used Proxy() before). But this will allow you to reflect user choices on one site on a completely different domain, albeit with a JavaScript dependency. And you don't need to touch server-side code.