Submitting forms with different encodings
Form data can be submitted in different formats. The most common are
application/x-www-form-urlencoded (default) and
multipart/form-data (for file uploads).
The FormData API makes it easy to construct form data
from a form element or programmatically.
// Method 1: From a form element
const form = document.querySelector('form');
const formData = new FormData(form);
const response = await fetch('/api/submit', {
method: 'POST',
body: formData
// Don't set Content-Type! Browser sets it with boundary
});
// Method 2: Build FormData manually
const formData = new FormData();
formData.append('name', 'Alice');
formData.append('email', 'alice@example.com');
formData.append('age', '30');
// Method 3: From an object
const data = { name: 'Alice', email: 'alice@example.com' };
const formData = new FormData();
Object.entries(data).forEach(([key, value]) => {
formData.append(key, value);
});
When sending FormData, don't set the Content-Type header.
The browser automatically sets it to multipart/form-data with the
correct boundary string.
// For simple forms without files, URL encoding is more compact
const form = document.querySelector('form');
const formData = new FormData(form);
// Convert to URLSearchParams for URL encoding
const params = new URLSearchParams(formData);
const response = await fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: params.toString()
// Results in: "name=Alice&email=alice%40example.com"
});
// Or build manually
const params = new URLSearchParams({
name: 'Alice',
email: 'alice@example.com',
message: 'Hello & goodbye!' // Special chars are encoded
});
console.log(params.toString());
// "name=Alice&email=alice%40example.com&message=Hello+%26+goodbye%21"// Prevent default submission and handle with fetch
const form = document.querySelector('#contact-form');
const submitBtn = form.querySelector('button[type="submit"]');
const status = document.querySelector('#status');
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Disable button during submission
submitBtn.disabled = true;
submitBtn.textContent = 'Submitting...';
try {
const formData = new FormData(form);
const response = await fetch(form.action, {
method: form.method,
body: formData
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const result = await response.json();
status.textContent = 'Submitted successfully!';
form.reset();
} catch (error) {
status.textContent = `Error: ${error.message}`;
} finally {
submitBtn.disabled = false;
submitBtn.textContent = 'Submit';
}
});