Serialize Form

serializeForm

Converts HTML form elements into structured JavaScript objects or URL-encoded query strings, handling both single and multiple input values.

Function Signature

function serializeForm<T extends boolean = false>(
  form: HTMLFormElement,
  toQueryString?: T
): SerializedForm<T>

Parameters

Returns

• SerializedForm<T>:
  • A Record<string, string | string[]> object (if toQueryString is false).
  • A string representing a URL-encoded query string (if toQueryString is true).

Example Usage

import { serializeForm } from 'toolbox-x/dom';

// Assuming an HTML form with inputs: name="John", hobbies="reading", hobbies="coding"
const form = document.querySelector('form') as HTMLFormElement;
const data = serializeForm(form);
console.log(data);
// → { name: 'John', hobbies: ['reading', 'coding'] }

Behavior Details

• Multiple Inputs: Multiple checkboxes with the same name or multi-select inputs automatically get serialized into arrays.
• File Inputs: File input values are serialized as their filename strings, not actual binary contents. For uploading files, use createFormData instead.

Types

SerializedForm

type SerializedForm<T extends boolean> = T extends false
  ? Record<string, string | string[]>
  : string;