1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

FormData empty

Discussion in 'JavaScript' started by ketting00, Jan 15, 2020.

  1. #1
    Hi guys,

    This script used to work well for me but now it makes me scratch my head hard. When I check the value with console.log() it shows empty object as FormData {}. Here's the script:
    
    <!DOCTYPE html><html><head>
        <title>Test document</title>
    </head><body>
        <form id="from" method="POST" action="test.html">
            <label>Your Name</label>
            : <input type="text" name="name" id="name" required /><br>
            <input type="submit" value="Submit" />
        </form>
    
        <div id="test"></div>
        <script>
            var doc = document
            , from = doc.getElementById("from")
            , test = doc.getElementById("test");
    
            from.addEventListener('submit', function(e) {
                e.preventDefault();
                sendData();
            });
        
            function sendData() {
                let data = new FormData(form);
                console.log(data); // FormData {}
            
                let xhr = new XMLHttpRequest();
                xhr.open('POST', '/www/test.html', true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        test.insertAdjacentHTML('beforeend', xhr.responseText);
                    }
                };
                xhr.send(data);
            }
        </script>
    </body></html>
    
    Code (markup):
    It should be something like:
    name=John+Doe
    Code (markup):
    Thanks for your help in advance,
    SEMrush
     
    Solved! View solution.
    Last edited: Jan 15, 2020
    ketting00, Jan 15, 2020 IP
    SEMrush
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    487
    Likes Received:
    45
    Best Answers:
    22
    Trophy Points:
    130
    #2
    You've assigned from as the variable name, not form :)
     
    hdewantara, Jan 15, 2020 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Yes, I've fixed this but still not working.
     
    ketting00, Jan 15, 2020 IP
  4. #4
    hdewantara, Jan 15, 2020 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Work like a charm.

    Thank you.
     
    ketting00, Jan 15, 2020 IP
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #6
    For the better way to grab data from form and serialized it use this function: https://vanillajstoolkit.com/helpers/serialize/

    Usage:
    
    var form = document.querySelector('#my-form');
    var formData = serialize(form);
    console.log(formData);
    
    Code (markup):
     
    ketting00, Jan 18, 2020 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #7
    ... and what is that method/library giving you that Formdata.entries does not? Well, apart from extra overhead for something already built into browsers?
     
    deathshadow, Jan 19, 2020 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Well, I think this ajax post gives you better control of data transaction without having to redirect. I see many web sites that redirect are slow.

    Are there any other better methods to do this?
     
    ketting00, Jan 19, 2020 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #9
    What do redirects have to do with the difference between that silly "Serialize" helper and the FormData object?
     
    deathshadow, Jan 20, 2020 IP
  10. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #10
    This is for sending json data like:
    name=Richard&surname=Roe&phone=1234567890&device=Samsung%20Galaxy
    Code (markup):
    All I do is storing data and tell the sender that data is recorded. If you don't use ajax it would refresh the page or go to somewhere else before returning.

    What is the better way do you suggest?

    PS: in my case it was node.js server. It only takes json data.
     
    ketting00, Jan 20, 2020 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #11
    That's NOT JSON, that's getData style. Server side it's still either GET or POST so again what is that serialize doing that FormData doesn't? You can feed either to XMLHttpRequest and server side will NOT know or see the difference.
    Not refresh but load a new page... what's so "wrong" with that?!? That should be your baseline behavior BEFORE you even THINK about throwing JavaScript at things client side, since scripting off graceful degradation is one of the many checkboxes you need to tick for accessibility.

    The unwritten rule of JavaScript -- If you can't make a fully working client side page without JavaScript FIRST, you likely have zero business adding scripting to it!

    Write your form to function normally, THEN and only then enhance it with JavaScript. There's nothing wrong with layering scripting ATOP the already working form, if you're one of those folks with fat bloated pages where you think avoiding the "evil pageload" does something... but really if that's a problem in the first place it likely means the HTML is trash.

    Oh noes, not the evil pageload when someone submits a form... BARF.
     
    deathshadow, Jan 22, 2020 IP
  12. Harry H

    Harry H Greenhorn

    Messages:
    27
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    23
    #12
    getData style? I thought it was x-www-form-urlencoded...
     
    Harry H, Jan 22, 2020 IP
  13. ketting00

    ketting00 Well-Known Member

    Messages:
    751
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #13
    Yes, it does and it causes page load which I don't like it. I don't want my clients wasting their precious time on this page load waiting stuff just to tell them that they are now good to go.

    The ajax works perfectly with PHP. However, it sends unreadable object to node.js server that I've to grab data from form and serialize it client side before sending. It should still work with javascript off.

    Why adding this scriptardy? I blame the platform I choose then.

    Do you think I should do it server side?

    On the side note: personally, I never fill out form for the second time if I entered wrong data and it takes me to another page to fill out data again, with correct format exactly this time.
     
    Last edited: Jan 22, 2020
    ketting00, Jan 22, 2020 IP
  14. Harry H

    Harry H Greenhorn

    Messages:
    27
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    23
    #14
    You have the correct body parser attached to node.js as middleware right?

    https://www.npmjs.com/package/body-parser
     
    Harry H, Jan 24, 2020 IP