Taxonomy Term redirect to filterable Post Type Archive
Дата публикации: 22-06-2026 17:37:49
Hey John,
1. Why the Reset Button Behaves This Way (The Logic of CS Forms)
The behavior you are encountering is possibly due to a combination of native HTML form reset behavior and how WordPress/Cornerstone renders pages on load:
Native HTML Reset: By default, when you click an HTML <button type="reset"> (or trigger a form reset event), the browser does not clear the fields to empty values. Instead, it resets all input fields back to their initial markup state (the values defined in the HTML when the page first finished loading).
Server-Side Pre-selection: When you redirect to /news/?search=&cs-form-id=posts-filter&post-category=33, the server processes the URL parameters. In the rendered HTML, it marks the category select option 33 as selected (or the checkbox/radio button as checked).
The “Default” Fallback: To the browser, category 33 is now the “default” state for this page load. When you click “Reset,” the browser restores the form to this pre-selected state. Since the inputs do not actually change value (they were already 33 and they reset to 33), no change is submitted to the looper, and the posts remain filtered.
2. Why the URL Tail Changes (= and &paged=1 cut off)
The = Cut Off (?search): When Cornerstone Forms processes an AJAX submission, it serializes form data using the browser’s native URLSearchParams API. For empty parameters (like an empty search input where value is ""), modern browsers’ URLSearchParams.toString() outputs the key name alone (e.g., ?search) instead of ?search=. Both are valid and resolve to the same value on the backend.
The paged=1 Cut Off: When a filter change or reset is detected on page 1, CS Forms automatically resets pagination parameters. Because page 1 is the baseline/default pagination page, it is stripped from the URL query parameters to keep the URL clean.
3. Custom Code to Make the Reset Button Work Instantly (Force Clean Reset)
Please note that the following suggestion is for guidance only. We do not provide support for custom codes. For that, you can subscribe to our One service.
To make the “Reset” button clear all filters back to their true baseline (e.g. show all categories, empty search) regardless of the URL parameters on load, you can override the browser’s default reset behavior with a short JavaScript snippet.
Add the following custom JavaScript to your Cornerstone Page JS (or global Custom JS in the Cornerstone builder settings):
document.addEventListener('DOMContentLoaded', function() {
// Find the Cornerstone Form by its data-cs-id or class
const form = document.querySelector('form[data-cs-id="posts-filter"]') || document.querySelector('form.cs-form');
if (!form) return;
// Listen for the reset event
form.addEventListener('reset', function(e) {
// 1. Prevent the default browser reset behavior (which restores URL pre-selected values)
e.preventDefault();
// 2. Manually clear all fields to their empty/baseline states
form.querySelectorAll('input, select, textarea').forEach(input => {
// Avoid clearing the hidden form ID needed for AJAX targeting
if (input.name === 'cs-form-id') return;
if (input.type === 'checkbox' || input.type === 'radio') {
input.checked = false;
} else if (input.tagName === 'SELECT') {
input.selectedIndex = 0; // Selects the first option (typically "All Categories" or placeholder)
} else {
input.value = ''; // Clears search query and text inputs
}
});
// 3. Dispatch a 'change' event to notify CS Forms that values have updated.
// This triggers CS Forms to run the AJAX looper update immediately.
form.dispatchEvent(new Event('change', { bubbles: true }));
});
});
How this works:
When the user clicks the Reset button, the script intercepts the event and stops the browser from restoring the URL-based preselected categories.
It loops through all inputs and resets them back to actual blank states (e.g., clearing text, unchecking checkboxes, resetting dropdowns to index 0).
It dispatches a change event on the form. CS Forms detects this change and immediately fires an AJAX call with the cleared query parameters, refreshing the looper to display all posts and updating the browser URL.
Схожие новости
Тональность 0
Информативность 0
theme.co