Enable filters with javascript

Anonymous

#238846

Hello,

I’m trying to check radio buttons with a SVG map like this :

const depts = document.querySelectorAll('#departements path');
const form = document.querySelector('.searchandfilter');

function handleDeptClick(e) {
    const departementNum = e.target.className.baseVal.split('-').pop();
    const inputRadioSelector = <code>input.sf-input-radio[value=&quot;${departementNum}&quot;]</code>;
    const inputRadio = document.querySelector(inputRadioSelector);
    if ( inputRadio.checked === false ) {
        inputRadio.checked = true;
    }
}

depts.forEach(dept => {
    dept.addEventListener('click', handleDeptClick);
});

this is working great,
but I don’t know how to enable the filtering like this.
If I try to submit the form, it reloads the page entirely.

Thanks for any help on this,

David

Anonymous

#238885

Hello,

maybe it would be better if I reformulate :
what I’m trying to do is to trigger the filtering when changing the checked radio button with javascript.

Thanks,

David

Trevor

#238904

In your code, I do not see how you are submitting the form. If the form is set to use Ajax, then it if you submit the form correctly, the page should not reload. This is a simply submit command:

$('.searchandfilter').submit();

Anonymous

#238908

Hello Trevor,

thanks a lot ! it worked !

I’m pretty sure I tried this before but in vanilla JS, not with JQuery.
Maybe, this is why it didn’t work.

Have a great day !

David

Trevor

#238915

Thanks for letting me know. I will close this thread for now.

[Author]

Posts