How do you POST html form data with javascript

Question

Im trying to POST data from a html form using javascript however on submission I believe no data is actually being sent because my alert is showing no data.

when i added an alert box

var jsonStr = JSON.stringify(FD);
      alert(jsonStr);

the output came up as "{}"

here is my full code below if anyone can spot my errora

<form class="emailentry" " method="post" name="myForm" id="myForm">
<label  for ="name">Name: </label><br>
<input type ="text"id="name" name="name: " ><br>
<label for ="emailad">Email: </label><br>
<input type ="email"id="emailad" name="emailad" ><br>
<input type= "submit" id="btn" name="submit" class="submitstyle">
</form>
<script>
    window.addEventListener( "load", function () {
  function sendData() {
    const XHR = new XMLHttpRequest();

    // Bind the FormData object and the form element
    const FD = new FormData( form );

    // Define what happens on successful data submission
    XHR.addEventListener( "load", function(event) {
        var jsonStr = JSON.stringify(FD);
      alert(jsonStr); // should present me the data i entered but it isnt
      alert("hi");
    } );

    // Define what happens in case of error
    XHR.addEventListener( "error", function( event ) {
      alert( 'Oops! Something went wrong.' );
    } );

    // Set up our request
    XHR.open( "POST", "ExampleUrl.ForStackOveerflow/post" );

    // The data sent is what the user provided in the form
    XHR.send( FD );
    

  }

  // Access the form element...
  const form = document.getElementById( "myForm" );

  // ...and take over its submit event.
  form.addEventListener( "submit", function ( event ) {
    event.preventDefault();

    sendData();
  } );
} );




</script>