JavaScript FormData interface allows you to construct a set of key/value pairs representing form fields and their values. If HTML form element is provided, it automatically captures its fields.
let formData = new FormData([form]);The FormData is those network methods, such as fetch, can accept a FormData object as a body. It’s encoded and sent out with Content-Type: multipart/form-data.
JavaScript FormData
A simple example code has two input fields for name and age respectively and onSubmit function of this form.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input {
margin: 5px;
padding: 4px;
}
</style>
</head>
<body>
<form id="testForm">
<input type="text" name="name" placeholder="Name"><br>
<input type="text" name="age" placeholder="Age"><br>
<input type="submit" value="Submit">
</form>
<script>
testForm.onsubmit = (e) => {
e.preventDefault();
const formData = new FormData(testForm);
console.log("Form Data");
for (let obj of formData) {
console.log(obj);
}
};
</script>
</body>
</html>Output:
FormData Methods
We can modify fields in FormData with methods:
formData.append(name, value)– add a form field with the givennameandvalue,formData.append(name, blob, fileName)– add a field as if it were<input type="file">, the third argumentfileNamesets file name (not form field name), as if it were a name of the file in the user’s filesystem,formData.delete(name)– remove the field with the givenname,formData.get(name)– get the value of the field with the givenname,formData.has(name)– if there exists a field with the givenname, returnstrue, otherwisefalse
Do comment if you have any doubts or suggestions on this Js interface topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version