getting form data with FormData()

[TechnoDiver]

Hello Phreaks and Geeks, 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

[Barand]

How do you define "does not work"?

Because when I use your form and the first function, my console shows the data entered in the form

[TechnoDiver]

16 minutes ago, Barand said:

How do you define "does not work"?

for me I get a quick flash of something in the console and it disappears before I have a chance to see what it is and then nothing. After doing that multiple times I've can see that the flash is indeed the form data, but it doesn't stay there. It's literally so quick that I've had to reload about a dozen times before my eyes could pick up what it was. I've got no other code attached to this as it's just a simple practice exercise so I'm not really sure what's going on

[Barand]

Doesn't your console have a "preserve" option?

Or, add "return false" to the end of your submitData() function to stop the page refreshing

Edited September 17, 2021 by Barand

[gizmola]

Along the lines of what Barry suggested, you also will find looking at the network tab is also very useful, as it might show you what is occurring with the actual request/response.  This will also lead you to the sources tab, so you can add a breakpoint to your javascript code and debug it while it's running, which will let you introspect the actual variables.

[TechnoDiver]

20 minutes ago, Barand said:

Or, add "return false" to the end of your submitData() function to stop the page refreshing

I thought for sure this would work too and didn't it was in fact the 'Preserve Log' option. Thank you.

But question: Why does the second way I tried not need the 'Preserve Log' enabled and the function way does?

[gizmola]

Because in the POST example, you are actually doing an HTTP POST request that goes to a new page.  This is why I suggested you look at the network tab, so you can see this in action.

In the 2nd (all javascript) you don't actually leave the page, you just run javascript code on your existing page.

[TechnoDiver]

6 minutes ago, gizmola said:

Because in the POST example, you are actually doing an HTTP POST request that goes to a new page.  This is why I suggested you look at the network tab, so you can see this in action.

In the 2nd (all javascript) you don't actually leave the page, you just run javascript code on your existing page.

Gotcha! Thanks