Skip to main content
Version: v8001

Auto-fill a form with extracted data

This guide shows how to populate an HTML form from a BlinkID scan result using the Web SDK. After a successful scan, you read the extracted fields and write them into the form inputs so the user does not have to type them manually.

The form​

Start with a plain HTML form. Give each input a name so you can target it from the result callback.

<form id="id-form">
  <label>Given name <input name="givenName" /></label>
  <label>Family name <input name="familyName" /></label>
  <label>Date of birth <input name="dateOfBirth" /></label>
  <label>Document number <input name="documentNumber" /></label>
  <label>Expiry date <input name="expiryDate" /></label>
  <button type="submit">Submit</button>
</form>

Read the result and write it into the form​

Create the SDK instance, then register a result callback. On Web, text fields are multi-alphabet string results, so you read them through .latin?.value (or one of the other supported alphabets).

import { createBlinkId } from "@microblink/blinkid";

const form = document.querySelector<HTMLFormElement>("#id-form")!;

const blinkId = await createBlinkId({ licenseKey: "your-license-key" });

blinkId.addOnResultCallback((result) => {
  setField(form, "givenName", result.firstName?.latin?.value);
  setField(form, "familyName", result.lastName?.latin?.value);
  setField(form, "documentNumber", result.documentNumber?.latin?.value);
  setField(form, "dateOfBirth", formatDate(result.dateOfBirth));
  setField(form, "expiryDate", formatDate(result.dateOfExpiry));
});

When you are done scanning, release the instance:

void blinkId.destroy();

The setField helper​

The helper looks up an input by name and writes a value into it. It skips undefined values so that fields the SDK could not extract are left untouched for the user to fill in.

function setField(form: HTMLFormElement, name: string, value: string | undefined) {
  if (value === undefined) {
    return;
  }

  const input = form.elements.namedItem(name);
  if (input instanceof HTMLInputElement) {
    input.value = value;
  }
}

Formatting dates​

Date fields such as dateOfBirth and dateOfExpiry are date results with numeric year, month, and day properties, each of which may be undefined. Months are in the range 1-12. Format them into an YYYY-MM-DD string, zero-padding the month and day. When the numeric parts are missing, fall back to the printed originalString, which is itself a string result read through .latin?.value.

type DateResult = {
  year?: number;
  month?: number;
  day?: number;
  originalString?: { latin?: { value?: string } };
};

function formatDate(date: DateResult | undefined): string | undefined {
  if (!date) {
    return undefined;
  }

  if (date.year !== undefined && date.month !== undefined && date.day !== undefined) {
    const month = String(date.month).padStart(2, "0");
    const day = String(date.day).padStart(2, "0");
    return `${date.year}-${month}-${day}`;
  }

  return date.originalString?.latin?.value;
}

Let users review before submitting​

Auto-fill is a convenience, not a substitute for the user's confirmation. Extraction can be imperfect on worn or low-quality documents, and some fields may be missing entirely. Always let the user review and correct the auto-filled values before they submit the form.

Last updated on