I’m building a rental marketplace using the RentalHive theme, and I need your assistance with improving the user experience on the “Explore Vehicles” (ex Properties) page where the search filters appear.
Currently, the filter system loads with “All Categories” selected by default, which doesn’t show relevant attributes. In order for users to see attributes specific to each category (like Motorbikes, Cars, or Boats), they have to manually:
1. Select a category (radio button), and then
2. Click the “Filter” button for the form to apply.
This process is unintuitive and causes friction.
I’d like to make it so that as soon as a user selects a category, the filter form is submitted automatically — just as if they clicked the “Filter” button manually.
Here’s what I’ve already tried with no success:
• Injected JavaScript to call .submit() on the .hp-listings-filter form when a category is changed.
• Tried triggering hpFilter.submit() (but it’s undefined globally).
• Simulated a .click() on the “Filter” button — no result.
• Tried full MouseEvent(‘click’, {…}) dispatching on the button, which also didn’t trigger the listing refresh.
• Attempted injecting the selected category into the form and then submitting it manually.
• Wrapped all the above inside DOMContentLoaded and used both vanilla JS and jQuery — no impact.
Despite all attempts, the listings only update when the “Filter” button is manually clicked by the user.
Could you kindly:
• Suggest the correct approach or code snippet for making the form auto-submit when a category radio button is changed?
• Or confirm if it’s currently possible to achieve this using your internal APIs or JavaScript events?
This UX improvement is critical for us, and I’d truly appreciate your help or a working code example.
I’m not HivePress staff, or on my computer at the moment, but you might be able to achieve what you’re looking for by simply adjusting the settings in your attributes to allow for them to be filterable. I forget what all of the options are, but I think this is do-able without customization. Forgive me, if I’ve got this wrong!
Hey Chris! Thanks for the suggesting, but I’m afraid it’s not the exact solution that will work for us Filterable attributes does not affect the way Categories are getting displayed on the Filter page, I’ve tried pretty much everything, so the only option left is custom coding
Sorry that wasn’t much help! I’ve had a play around with the settings and can re-create the issue myself. I had a go at solving this for you and I think I’ve come up with a working snippet:
function enqueue_auto_submit_script() {
wp_add_inline_script(
'hivepress-core-frontend',
"
document.addEventListener('DOMContentLoaded', function() {
const categoryRadios = document.querySelectorAll('input[name=\"_category\"]');
if (categoryRadios.length === 0) {
console.error('No category radio buttons found. Verify the name attribute is \"_category\".');
return;
}
console.log('Found', categoryRadios.length, 'category radio buttons');
categoryRadios.forEach(radio => {
radio.addEventListener('change', function() {
console.log('Category selected:', this.value);
const form = this.closest('form');
if (form) {
console.log('Form found, submitting now');
const submitButton = form.querySelector('button[type=\"submit\"]');
if (submitButton) {
submitButton.click();
} else {
form.submit();
}
} else {
console.error('No form found containing the radio button');
}
});
});
});
"
);
}
add_action('wp_enqueue_scripts', 'enqueue_auto_submit_script');
This works as you described in your OP by submitting the form upon selecting a category/radio button, and thus not requiring the ‘Filter’ button to be clicked.
I was literally screaming when tried your snippet and it worked!
Thanks so much for your help! It worked, and worked in the exact way I wanted, you’re LEGEND!
Appreciate your help big time🙏
And I hope this will help other users someday if they encounter the same issue
I added the snippet via the Code Snippets plugin. I don’t have a test site that I’m able to show you, but this snippet makes it so that if you’re on the search page with the categories listed at the side as radio buttons. If you click a category name, it will refresh the page to filter the results without you having to manually click the ‘Filter’ button after choosing a category.
Once the page refreshes, the category-specific attributes can be displayed in the side bar to further filter your search.
Sorry, also don’t have a test site to show how it works, mine is under maintenance. As soon as will finish everything, will provide a link for you to check🙌🏻
For now, you can try adding this snippet via Code Snippets plugin as Chris mentioned, it’s not breaking the structure of a website or anything, so it’s quite safe to apply and check
It’s a PHP snippet, specifically targeting Categories selection radio buttons of the “Properties” page. Make sure your snippet is set to run everywhere and it’s active.
I can confirm that it works well!
thanks @ihor
do i have to use just your snippet or yours and the one above both ?
i tried with just yours and nothing changes.
is there something extra needed like some jquery code enabling needed etc.
My categories are showing as a Drop Down select box - only one selection allowed now.
When I select one, nothing changes. I have to press Search after that.
