This article shows you how to retrieve the data of a form with Javascript
Note that only succesful controls are send on submit.
You don't need to submit a form to get the values
Demo
<form id="demo">
<input name="user" type="text" />
<input id="ageid" name="age" type="number" value="10" />
</form>
let form = document.getElementById("demo");
const user = form.elements.user.value;
console.log("User: "+user +" (empty string)");
console.log("Age element index via name: "+form.elements['age'].value);
console.log("Age direct notation via name: "+form.age.value);
console.log("Age direct notation via id: "+form.ageid.value);
From the submit event, you can get the following value
You can:
Example with the name attribute.
<form onsubmit="handleSubmit(event); return false;">
<input name="user" type="text" value="Foo" />
<input id="ageid" name="age" type="number" value="10" />
<button type="submit">Get this values !</button>
</form>
handleSubmit = (event) => {
let form = event.target;
console.log("User: "+form.elements.user.value);
console.log("Age element index via name: "+form.elements['age'].value);
console.log("Age direct notation via name: "+form.age.value);
console.log("Age direct notation via id: "+form.ageid.value);
}
A FormData object is a javascript runtime object of the data of a forms.
It provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method.
For example and more, see its dedicated page: How to use FormData and send multipart-data in the Browser (Web API )?