Any way to both pass form data and fun a fetch command with the same button press?

I might be going about this entirely the wrong way, but I’m working off of whatever tutorials I can find and am still getting acquainted with javascript, so I may very well have missed something obvious. I’ve tried everything I can think of and I’m completely out of ideas. I will detail what I’ve tried below. First, the problem:

I have a form, and I am trying to:

  1. Pass the contents of the form to a php script, which does some processing and then amends it to an html file, feed.html, then
  2. update a div to reflect the contents of feed.html, without having to completely refresh the page.

Here is the form and the div I want to update:

<div id="feed"></div>

<form onsubmit="return sendData()" id="tincan">
  <textarea id="shoutAperture" name="shoutAperture"></textarea>
  <!--<input type="submit" id="shout" name="shout" value="SHOUT">-->
  <button id="shout" name="shout">SHOUT</button>
</form>

(I have also tried it with <input type="submit"> instead of a button in case that made any difference, thus the commented-out code.)

Here are the scripts I have, which so far just collect the contents of the textarea and pass them to shout.php:

async function summonFeed() {
  let file = "feed.html";
  let summons = await fetch(file);
  let feed = await summons.text();
  document.getElementById("feed").innerHTML = feed;
}
summonFeed();

function sendData() {
  let data = new FormData(document.getElementById("tincan"));
  fetch("shout.php", {
    method: "POST",
    body: data,
  });
  return false;
}

It successfully passes the form data to my php script and, from there, to feed.html, and when there is text in the feed.html file it does successfully show up on page load, but I can’t get it to refresh dynamically. So far, no matter what I’ve tried, I have only been able to get the “feed” div to update upon hard refreshing the page (control-clicking the refresh button in Firefox; it does nothing when I simply click refresh). I have tried:

  • calling multiple functions in form onsubmit (I tried separating them with &, &&, ,, and ; as indicated by various decade-old forum threads). This usually made it update the url in the address bar instead of actually passing my data to the php script.
  • adding a .then command to function sendData () either calling the summonFeed script or just wholesale repeating all of its code. (Nothing happens.) (I admit I don’t think I’ve fully grasped the mechanics of .then, despite my best efforts.)
  • creating a third function which runs sendData and summonFeed, and calling that from the form instead of sendData. (Nothing happens, or it just updates the url instead of passing the data to my php file.)
  • creating a separate onClick function that just runs summonFeed again when the button is pressed (It still calls the old version of the file from before the php script updated it; when I hard refresh the page the changes appear.)

I think that’s all I tried, but I have been at this for hours and may have forgotten some things. Any suggestions would be deeply appreciated!