29.01.2026 | Peter Gerken

Manipulate Form Data before Submit

formDataManipulation.js

// Modifies form data on submit.
form.addEventListener("formdata", (e) => {
  const formData = e.formData;
  geoLocationFieldNames.forEach((name) => {
    formData.delete(name);
  });
});

Issue:

A list of teasers should be filtered by the set "area of detail" (boundaries) on an embedded map and additionaly by exposed filters
A filtered version of the view should be shareable by link, ensuring no items are unwantedly filtered out

Solution:

use "formdata event" which is supported by recent versions of all major browsers
form data is being manipulated on submit
map viewport boundaries will be injected into the get request, but not included into exposed filters

Conclusion:

Using the provided solution will enable sharing of a set filter and ensures that whoever opens the link will see all teasers corresponding to the exposed filters. The map will be fully zoomed out so no teasers are 'accidentally' filtered out.

Zurück zur DevBit-Übersicht

Weitere DevBits

26.02.2026 | Holger Weischenberg

Using CSS media queries and CSS variables in JavaScript

cssMediaQuery.js

// Retrieve all computed styles from the root HTML element (:root)
const rootStyles = getComputedStyle(document.documentElement);

// Get the value of the CSS variable --Breakpoint.
// Use a fallback (e.g., 768px) if the variable is not defined.
const breakpoint = rootStyles.getPropertyValue('--Breakpoint').trim() || '768px';

// Create a MediaQueryList based on the breakpoint value
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint})`);

// Function that runs when the viewport is at or above the breakpoint
function handleDesktopLayout() {
    console.log("Viewport is at or above the breakpoint.");
}

// Function that runs when the viewport drops below the breakpoint
function handleMobileLayout() {
    console.log("Viewport is below the breakpoint.");
}

// Early return for the initial state:
// If the viewport does NOT meet the breakpoint requirement, run mobile logic and exit
if (!mediaQuery.matches) {
    handleMobileLayout();
    // No desktop logic needed at this point
} else {
    handleDesktopLayout();
}

// Listen for changes in viewport size relative to the breakpoint
mediaQuery.addEventListener('change', (event) => {
    if (event.matches) {
        // The viewport just became equal to or larger than the breakpoint
        handleDesktopLayout();
    } else {
        // The viewport just became smaller than the breakpoint
        handleMobileLayout();
    }
});

13.11.2025 | Peter Gerken

Open all HTML details elements via browser console

open_details.js

let details = document.getElementsByTagName('details');
for (i = 0; i < details.length; ++i) {
  details.item(i).open = true;
}

html

details

quality of life

copy-paste