Using XMLHttpRequest and post - post

Question

The form works fine with the parameter action= "(path to php file)", but when I try to use the XMLHttpRequest instead I don't get any response.
The reason I want to use XMLHttpRequest is that I want to save the response (text) into an array.
function receivedData(serverReply) {
if (serverReply.readyState == 4 && serverReply.status == 200) {
document.getElementById('main').innerText = serverReply.responseText;
}
else {
console.debug('problem ' + serverReply.errorCode);
}
}
function sendRequest() {
let myForm = new FormData(document.getElementById('timeDateFormId'));
let xhr = new XMLHttpRequest();
xhr.open("POST", "get3.php");
xhr.addEventListener('readystatechange', function () { receivedData(xhr) }, false);
xhr.send(myForm);
}
document.getElementById('timeDateFormId').addEventListener('submit', sendRequest, false)
<form id="timeDateFormId" method="post">
<label>From date (YYYYMMDD)</label>
<input type="text" name="fDate">
<br>
<label>To date (YYYYMMDD)</label>
<input type="text" name="tDate">
<br>
<label>From time (HH:MM)</label>
<input type="text" name="fTime">
<br>
<label>To time (HH:MM)</label>
<input type="text" name="tTime">
<br>
<input type="submit" name="submit" value="go">
</form>

Answer 1

You call the sendRequest method when you submit the form.
Submitting the form causes the browser to navigate to the response from the form submission.
This loads a new page which cancels the Ajax request.
You need to prevent the default behaviour of form submission if you want to run JavaScript instead.
function sendRequest(evt) {
evt.preventDefault();
// etc