Javascript Update URL With Options From Multiple Form Checkboxes

Question

I have a form with 2 sets of checkboxes with a view this could be 3 or 4 down the line.

For this question I have 2 which each have >5 checkboxes and multiple items can be selected in those check boxes.

When a user selects the checkboxes I want to update the URL and refresh with parameters which I'll be using to filter content.

URL I want:

example.com/category/?content=video_static&channel=facebook-ads_instagram-ads

URL I'm getting:

example.com/category/?content=video&content=static&channel=facebook-ads&channel=instagram-ads

I'm not currently changing the URL with javascript but just a form input and submit. I'm thinking I'll need to use Javascript to enable better URL handling.

I want to use undercores to then seperate the checkbox selections which at the minute I'm happy to just refresh the page.

I appreciate this may be very simple for some but Javascript isn't my thing and I have about 20 tabs open trying. Any help is appreciated.

Here is example form (please ignore the tweo different checkbox HTML formats, I hadn't updated the second before this):

   <form id="abFilter" method="get" role="form" action="">
        <div class="list-group">
        <h3>Content Type</h3>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="static" name="content" value="static">
            <label for="static">static</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="carousel" name="content" value="carousel">
            <label for="carousel">carousel</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="video" name="content" value="video">
            <label for="video">video</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="gif" name="content" value="gif">
            <label for="gif">gif</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="dpa" name="content" value="dpa">
            <label for="dpa">dpa</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="stories" name="content" value="stories">
            <label for="stories">stories</label>
            </div>
            <div class="list-group-item checkbox">
            <input type="checkbox" class="" id="influencer" name="content" value="influencer">
            <label for="influencer">influencer</label>
            </div>
        </div>
        <div class="list-group">
        <h3>Channels</h3>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="facebook-ads">
            facebook-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="instagram-ads">
            instagram-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="google-ads">
            google-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="microsoft-ads">
            microsoft-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="tiktok-ads">
            tiktok-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="snapchat-ads">
            snapchat-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="youtube-ads">
            youtube-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="pinterest-ads">
            pinterest-ads
            </label>
            </div>
            <div class="list-group-item checkbox">
            <label>
            <input type="checkbox" class="" name="channel" value="podcast-ads">
            podcast-ads
            </label>
            </div>
        </div> 
    <button id="select">Apply Filter</button>
    </form>

Carsten Massmann · Accepted Answer · 2021-06-29 05:02:02Z

The following should do it:

document.querySelector("form").onsubmit=ev=>{
  ev.preventDefault();
  let o={};
  ev.target.querySelectorAll("[name]:checked").forEach(el=>{
   (o[el.name]=o[el.name]||[]).push(el.value)})
  console.log(location.pathname+"?"+
   Object.entries(o).map(([v,f])=>
   v+"="+f.join("_")).join("&")
  );
}

<form id="abFilter" method="get" role="form" action="">
<div class="list-group">
<h3>Content Type</h3>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="static" name="content" value="static">
    <label for="static">static</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="carousel" name="content" value="carousel">
    <label for="carousel">carousel</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="video" name="content" value="video">
    <label for="video">video</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="gif" name="content" value="gif">
    <label for="gif">gif</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="dpa" name="content" value="dpa">
    <label for="dpa">dpa</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="stories" name="content" value="stories">
    <label for="stories">stories</label>
    </div>
    <div class="list-group-item checkbox">
    <input type="checkbox" class="" id="influencer" name="content" value="influencer">
    <label for="influencer">influencer</label>
    </div>
</div>
<div class="list-group">
<h3>Channels</h3>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="facebook-ads">
    facebook-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="instagram-ads">
    instagram-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="google-ads">
    google-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="microsoft-ads">
    microsoft-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="tiktok-ads">
    tiktok-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="snapchat-ads">
    snapchat-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="youtube-ads">
    youtube-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="pinterest-ads">
    pinterest-ads
    </label>
    </div>
    <div class="list-group-item checkbox">
    <label>
    <input type="checkbox" class="" name="channel" value="podcast-ads">
    podcast-ads
    </label>
    </div>
</div> 
<button id="select">Apply Filter</button>
</form>

Instead of only showing the new location string with console.log() you should of course use it to apply your filter settings, either through an AJAX call or simply by replacing the current document.location.href.

Collectives™ on Stack Overflow

Javascript Update URL With Options From Multiple Form Checkboxes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related