Export Data Modal with Format and Field Picker — Free HTML CSS JS Snippet

A plain "Export CSV" button assumes every visitor wants every field in exactly one format. This modal gives them a real choice: three format cards (CSV, JSON, PDF) and a checklist of individual fields, with a summary line and the export button itself both staying in sync with whatever combination is currently selected.

One `updateSummary()` function reconciles three states at once

Every interaction — clicking a format card, toggling a single checkbox, or clicking "Select all" — calls the same updateSummary() function afterward. It recomputes the checked-field count, rewrites the summary sentence to match both that count and the currently selected format, and enables or disables the export button — all together, so there's no path where the summary text could say "3 fields" while the button is actually disabled for having zero, or where the format name in the summary lags behind the actually-selected format card.

The export button disables itself on a real, checked condition

Rather than always being clickable and letting a zero-field export silently do nothing, exportBtn.disabled is set directly from checkedCount === 0. A visitor who unchecks every field sees the summary line change to an explicit "Select at least one field to export" and watches the button visually grey out — the invalid state is communicated, not just silently prevented.

"Select all" is really "select all or deselect all," decided live

selectAllBtn's own label text updates every time updateSummary() runs, based on fieldCheckboxes.every(cb => cb.checked). When every field is already checked, the button relabels itself "Deselect all" — clicking it then unchecks everything rather than doing nothing (which is what a button permanently labeled "Select all" would confusingly do once everything was already selected).

Format selection uses one shared variable, not per-button state

selectedFormat is a single string variable that every format button's click handler overwrites, and the visual active state is reapplied to all three buttons together via formatButtons.forEach on every click — comparing each button against the one that was actually clicked. This guarantees exactly one format card can ever show as active, since the active class is fully recomputed across all three buttons on every click rather than toggled individually.

The export action is a real state handoff, not a dead end

Clicking "Export" collects the checked fields into a real array via .filter().map() and pairs it with selectedFormat — exactly the payload a real fetch() call to a backend export endpoint would need, shown in a code comment at the point where you'd wire it in. The button shows a brief "Preparing..." state before the modal closes, simulating the round-trip a real export request would involve.

Customizing it

Add a fourth format by adding another .edm-format button with its own data-format value — the click-handler loop and selectedFormat logic already generalize to any number of format buttons. Add or remove fields by editing the .edm-field checkboxes in #edmFields; fieldCheckboxes is queried fresh from the DOM, so no JavaScript changes are needed for the count and summary logic to pick up new fields.