. Advertisement .
..3..
. Advertisement .
..4..
Hello everyone! Today we come to a new topic. This is also a common mistake for those who are new to programming. Have you used the form? During the process of running the project, you may encounter the situation “FormData.append(“key”, “value”) is not working“. And you are struggling to find a solution? This article will help you find the right direction to get the results you want.Let’s find out together!
When does “FormData.append(“key”, “value”) is not working” error occur?
Below is the program I run but it throws an error:
var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);
The result returned like this, it doesn’t match my expectation that it returns the same as I set it up:
FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }
Solving the error “FormData.append(“key”, “value”) is not working”
Method 1: Just follow these steps
Chrome 50+, Firefox 39+ (resp. 44+) have had a few new feature updates, please refer to below:
- formdata.entries() (combine with Array.from() for debugability)
- formdata.get(key)
and many more functions.
Back to your problem, usually to insert a certain value without input on the form, we often use js to insert hidden input. The append method allows us to insert a key => value pair into FormData, which we can use to insert a new value for an existing key or insert a new one similar to updating the value for the input or inserting a hidden input in FormData. When an object error occurs, if you are using Chrome browser, you can completely solve it by using the “send” command and checking the data on the browser. Sending is very simple, just follow these steps:
var xhr = new XMLHttpRequest; xhr.open('POST', '/', true); xhr.send(data);
Method 2: Use a loop to iterate through the values
Excepting the way mentioned above, there is also nnother way to fix the ”FormData.append(“key”, “value”) is not working”. It is using a loop to iterate through the values. Let’s examine the following example to understand more:
for (const data of formData) {
console.log(data);
}
Let’s use a for-of loop to iterate through the formData
FormData
object’s entries. We log the data
value there. As a FormData
object is an repeatable object, so it works. Although this is a simple way, it will make you unbelievable. The efficiency of its is very enormous, it makes your error completely go away.
Conclusion
Above is a guide for you to solve the problem “FormData.append(“key”, “value”) is not working”. Hope your project will be running normally again soon. If you have any questions, please contact us immediately for answers!
Read more
Leave a comment