Jump to content

getting form data with FormData()


TechnoDiver
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.