Javascript Advanced Search With Parametrized Url

I have a javascript/springboot project that has a search page. On the page you can select multiple filter options then hit search. Here's a simplified demo of that page on fiddle.

Solution 1:

You can use multiple parameters in your query string with comma-separated values.

functiongetValues(id) {
    return $("#" + id).val().join(",");
}

$("button").click(function() {
    location.href = "search" +
        "?loc=" + getValues("e1") +
        "&type=" + getValues("e2") +
        "&col=" + getValues("e3");
})

Here's a fiddle to see an example. You can then retrieve each parameter individually and split the values around the commas.

If your options could potentially contain commas, you should either escape them or use a different URL-safe character to delimit the values.