I have a drop down form with check boxes on a page once user select there filters I need to add the value of that check box that is selected in the URL so that it gets search perfectly in the CMS

For example a good URL looks like that.

https://www.zyris.io/sort-and-filter?interests-2=Animals|Art&ages=Teens (13 to 17)&days-2=Today

I write the code of it. But its also add the variable as null that are not selected so could not able to search with that URL.

Any solution of it so I can able to add only those variable that are selected.

Here is my JavaScript Code :

document.getElementById("search").onclick = function formJS() {
    var a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, url = null;
    if ($('#Animal').is(":checked")) {
        a = "Animals";
        console.log("Animals is checked");
    }


    if ($('#Ar').is(":checked")) {
        b = "|Art";
        console.log("Art is checked");
    }


    if ($('#Histor').is(":checked")) {
        c = "|History";
        console.log("History is checked");
    }


    if ($('#Scienc').is(":checked")) {
        d = "|Science";
        console.log("Science is checked");
    }


    if ($('#Technolog').is(":checked")) {
        e = "|Technology";
        console.log("Technolog is checked");
    }


    if ($('#Today2').is(":checked")) {
        f = "Today";
        console.log("Today is checked");
    }


    if ($('#Next7Days2').is(":checked")) {
        g = "|Next 7 Days";
        console.log("Next 7 Days is checked");
    }


    if ($('#ThisMonth2').is(":checked")) {
        h = "|This Month";
        console.log("This Month is checked");
    }


    if ($('#NextMonth2').is(":checked")) {
        i = "|Next Month";
        console.log("Next Month is checked");
    }


    if ($('#Morning').is(":checked")) {
        j = "|Morning";
        console.log("Morning is checked");
    }


    if ($('#Afternoon').is(":checked")) {
        k = "|Afternoon";
        console.log("Afternoon is checked");
    }

    if ($('#Evening').is(":checked")) {
        l = "|Evening";
        console.log("Evening is checked");
    }


    if ($('#firstPrice').is(":checked")) {
        m = "$0 — $20";
        console.log("0 — 20 is checked");
    }


    if ($('#secondPrice').is(":checked")) {
        n = "|$20 — $50";
        console.log("$20 — $50 is checked");
    }


    if ($('#thirdPrice').is(":checked")) {
        o = "|$50+";
        console.log("$50  is checked");
    }


    if ($('#Kids').is(":checked")) {
        p = "|Kids (Up to 7)";
        console.log("Kids (Up to 7) is checked");
    }


    if ($('#Tweens').is(":checked")) {
        q = "|Tweens (8 to 12)";
        console.log("Tweens (8 to 12) is checked");
    }


    if ($('#Teens').is(":checked")) {
        r = "|Teens (13 to 17)";
        console.log("Teens (13 to 17) is checked");
    }



    if ($('#Adults').is(":checked")) {
        s = "Adults (18+)";
        console.log("Adults (18 ) is checked");
    }


    url = 'https://www.zyris.io/sort-and-filter?ages='
    e   f   g   h '&interests-2='   a   b   c   d '&prices-2='
    i   j   k   l '&times= &days-2='
    m   n   o   p '                                       
    setTimeout(function() {
        window.location.href = url;
    }, 2000);



}

CodePudding user response：

Use an array instead of lots of different variables. Then you can join the array when creating the URL.

let interests = [];
if ($('#Animal').is(":checked")) {
    interests.push("Animals");
    console.log("Animals is checked");
}
if ($('#Ar').is(":checked")) {
    interests.push("Art");
    console.log("Art is checked");
}
// and so on
let times = [];
if ($('#Today2').is(":checked")) {
    times.push("Today");
    console.log("Today is checked");
}
// and so on, similarly for prices and ages

let interests_param = encodeURIComponent(interests.join('|'));
let times_param = encodeURIComponent(times.join('|'));
let prices_param = encodeURIComponent(prices.join('|'));
let ages_param = encodeURIComponent(ages.join('|'));

let url = `https://www.zyris.io/sort-and-filter?ages=${ages_param}&prices-2=${prices_param}&times=${times_param}&interests-2=${interests_param}`;