I hope the week has seen you all well and you're all gearing up for a great weekend. I've had to take up relearning of js and new learning of ajax recently and have a simple question I can't seem to resolve.

Take this sample form here ->

<form action="", method="post", onsubmit="return submitData(this)">
    First Name: <br>
    <input type="text" name="firstname"> <br>

    Last Name: <br>
    <input type="text" name="lastname"> <br>

    Age: <br>
    <input type="text" name="age"> <br>

    <input type="submit" id="buttonOne" value="Submit">
</form>

I've been passing the morning familiarizing myself with XMLHttpRequest() and FormData() classes and have the following super simple snippets

function submitData(fdata) {
    var formData = new FormData(fdata);

    for (var pair of formData.entries()) {
    console.log( pair[0] + ' - ' + pair[1] );
    }   
}

AND

var formData = new FormData();
formData.append('key_1', 'First value');
formData.append('key_2', 'Second value');
formData.append('key_3', 'Third value');

for (var pair of formData.entries()) {
    console.log( pair[0] + ' - ' + pair[1] );
}

The bottom one, where I create the form data programatically displays the data in console properly. The top one where I try to pull the data from the form does not work. Could someone break down what is happening here and point out the errors in my thinking please. Thank you