Join the Voxel Guide Community!
Get Involved
The snippet will hide the search button, if nothing is selected in a specific dropdown.
It will use the name of the filter option (visible name, not the slug).
As soon as something is selected, the search button will become active.
Use in HTML Widget or alternative create a separate.js and .css file.
<script>
document.addEventListener('DOMContentLoaded', function () {
var fltrTxt = document.querySelector('.ts-filter-text');
var srchBtn = document.querySelector('.ts-search-btn');
if (fltrTxt && srchBtn) {
var updtBtnState = () => {
var isDsbl = fltrTxt.textContent.trim() === '[Filter Name]';
srchBtn.disabled = isDsbl;
srchBtn.classList.toggle('dsbl', isDsbl);
};
updtBtnState();
new MutationObserver(updtBtnState).observe(fltrTxt, { childList: true, subtree: true });
}
});
</script>
<style>
.ts-search-btn.dsbl {
background-color: #d3d3d3;
color: #a0a0a0;
cursor: not-allowed;
pointer-events: none;
}
</style>
