I searched around for the last few days, but couldn’t get the entry point of understanding.
How the work together between HTML, Js and PHP for the submit button is.
Especially for my case, I want a submit button that triggers bootstrap toast via id=”” and submit the name=”” value further to PHP (but more later)

So for my comprehension, I thought / knew:

1. normally a Html <button type="submit" is going via
   form action to PHP and give them the name and value tags that i could grab them.
   (php is not the problem I normally get the data)
2. and if there is a id="value" it goes to javascript

But in my example code from bootstrap toast, I always get just the name="" and value="" tag back in PHP via var_dump($_POST); or I just
get a pop-up on the JavaScript side from Bootstrap toast. I have seen code who grab the form data to JS and declare own var’s and sends them further to PHP. But this seems for me, not such efficient. Declare twice and also possibility for bugs, security risks (if not declared correct) are higher I think.

So long things short, how is the guideline or standard way to do it ? I am correct on HTML id "" to JS and form to PHP ? What are I been missing to learn about ? I already read the MDN Document: getElementsByClassName() method and also for id and what is an element and so on.

I think I miss something to declare in Js, like the form submit must go imediatly to PHP ?
I have done it also with form.submit() but never receive the post to php $_POST.

Bootstrap example code: //changed button to submit

<button type="submit" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

tied in js:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

changed:

<form id="form>" 
document.getElementById('form')
addEventListener('submit'
// also ofcourse addEventListener('click'

or also included :
preventDefault();

How ever please explain what i missed, to get the submit button working with show bootstrap toast and send the form to php.
I mention 99% i missed something in here :

 toastTrigger.addEventListener('click', () => {
 toastBootstrap.show()
// do submit my form to php
   })