如何从整个表单而非单个元素获取参考数据？附页面HTML代码

Based on your provided HTML form (with id job), here are straightforward ways to grab all form data at once using vanilla JavaScript—no need to fetch each input individually:

Using the FormData Object (Modern Standard) #

This is the most reliable method for collecting all form data, including checkboxes, radio buttons, text inputs, and more.

Step 1: Get the Form Element #

First, select your form using its ID:

const form = document.getElementById('job');

Step 2: Create a FormData Instance #

Wrap the form element in a FormData object to automatically collect all input values (it uses each input's name attribute as the key):

const formData = new FormData(form);

Step 3: Access the Full Dataset #

You can iterate through all key-value pairs to inspect the entire form data:

// Loop through every entry in the form
for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

// Example output for your form:
// account: [user's input value]
// pull: on (since it's checked by default)

Convert to a Plain JavaScript Object #

If you prefer working with a regular object (easier to manipulate or send as JSON), convert the FormData like this:

const formObject = Object.fromEntries(formData.entries());
console.log(formObject);
// Output: { account: "your-account-number", pull: "on", ... }

Alternative: Manual Collection (For Older Browsers) #

If you need to support very old browsers that don’t have FormData, you can manually gather all inputs:

const form = document.getElementById('job');
const formObject = {};

// Get all form controls (inputs, selects, textareas)
const inputs = form.querySelectorAll('input, select, textarea');

inputs.forEach(input => {
  // Handle checkboxes/radios (only include checked ones)
  if (input.type === 'checkbox' || input.type === 'radio') {
    if (input.checked) {
      formObject[input.name] = input.value;
    }
  } else {
    formObject[input.name] = input.value;
  }
});

console.log(formObject);

Key Notes: #

• Ensure all your form inputs have a name attribute—this is how FormData maps values to keys (the id isn’t used for this purpose).
• Checkboxes and radio buttons will only appear in the dataset if they’re checked, which matches standard form submission behavior.

内容的提问来源于stack exchange，提问作者user1601716