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,
to check FormData I guess you should call its entries() method, like: for(var pair of data.entries()) { console.log(pair[0]+ ', '+ pair[1]); } Code (JavaScript): Ref: https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries
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):
... and what is that method/library giving you that Formdata.entries does not? Well, apart from extra overhead for something already built into browsers?
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?
What do redirects have to do with the difference between that silly "Serialize" helper and the FormData object?
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.
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.
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.
You have the correct body parser attached to node.js as middleware right? https://www.npmjs.com/package/body-parser