HTML onformdata Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onformdata attribute is an event handler in HTML that is triggered when a FormData object is constructed from a form, typically via the formdata event. This event allows developers to interact with the form’s data before it is sent to the server.

Key Points:

Event Type: formdata
Event Target: Usually a <form> element.
Supported Forms: Only triggers for forms that are submitted using the submit() method or by clicking a submit button that doesn’t have formnovalidate.
Typical Use Case: You can manipulate or inspect form data programmatically before it is sent, such as adding additional fields, logging data, or performing conditional changes.

Syntax

Inline HTML:

<form onformdata="myFunction(event)">
  ...
</form>

JavaScript:

function myFunction(event) {
  const formData = event.formData; // The FormData object
  for (let [name, value] of formData) {
    console.log(`${name}: ${value}`);
  }
}

Or using addEventListener:

const form = document.querySelector('form');

form.addEventListener('formdata', (event) => {
  const formData = event.formData;
  formData.append('extraField', 'extraValue'); // Add additional data
  console.log([...formData.entries()]);
});

How It Works

When a form is submitted, the browser constructs a FormData object containing all form input values (name/value pairs).
The formdata event is fired after the FormData object is created but before the data is sent to the server.
Using the onformdata attribute or form.addEventListener('formdata', ...), you can:
- Inspect values.
- Append extra fields.
- Modify values.
The changes you make in the FormData object will be included when the form is submitted.

Example

<form id="myForm" onformdata="handleFormData(event)">
  <input type="text" name="username" value="John">
  <input type="email" name="email" value="john@example.com">
  <button type="submit">Submit</button>
</form>

<script>
function handleFormData(event) {
  const formData = event.formData;

  // Log all form data
  for (let [key, value] of formData) {
    console.log(key, value);
  }

  // Add an extra field dynamically
  formData.append('timestamp', Date.now());
}
</script>

Behavior:

When the form is submitted, the handleFormData function logs the form data and adds a timestamp field.
This additional field will be sent along with the other form fields to the server.

Use Cases

Adding hidden data automatically before sending.
Logging or auditing form submissions.
Modifying form fields programmatically.
Integrating with JavaScript frameworks that need to manipulate form submission data.

Syntax

<form onformdata="script(event)"></form>

Values

scriptThe name of the script to use when the event has been triggered.

Example

Please click on 'Editor' to see working example...issues with iframe.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>onformdata Example</title>

</head>

<body>

  <h2>FormData Event Example</h2>



  <form id="myForm" onformdata="handleFormData(event)">

    <label>

      Name: 

      <input type="text" name="username" value="John">

    </label><br><br>

    

    <label>

      Email: 

      <input type="email" name="email" value="john@example.com">

    </label><br><br>

    

    <button type="submit">Submit</button>

  </form>



  <script>

    function handleFormData(event) {

      const formData = event.formData; // Get the FormData object

      

      console.log("Form data before modification:");

      for (let [key, value] of formData) {

        console.log(`${key}: ${value}`);

      }



      // Add a new field dynamically

      formData.append('submittedAt', new Date().toISOString());



      console.log("Form data after adding new field:");

      for (let [key, value] of formData) {

        console.log(`${key}: ${value}`);

      }



      // You can also modify existing fields if needed

      if (formData.has('username')) {

        formData.set('username', formData.get('username') + ' ✅');

      }

    }



    // Optional: prevent default submission to see the console logs

    document.getElementById('myForm').addEventListener('submit', function(e) {

      e.preventDefault();

      alert("Form submitted! Check the console for FormData output.");

    });

  </script>

</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onformdata event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.