Pass parameter to function onclick jQuery

Question

I am trying to remove the parameters from the URL with jquery. Actually parameters have to be passed dynamically and should be the text of parent element on click. Then after adding a prefix to that, I need to pass that to function.

As in image shown below, when someone clicks the Clear link, it fetches the filter name from its heading title ie COLOR, after adding some prefix, say js_, then pass this js_color to function.

Till now, I have done something like this but it doesn't seems to work. Can you please help me out.

Thanks

Edit:

If I pass param value manually, it is working fine.

Working: removeParam("js_color", url)

Not Working: removeParam(param, url)

Fiddle: https://jsfiddle.net/jz1dyh9r/

Function not getting value for 1st parameter.

    // Append Clear Link to element
    $('.woof_redraw_zone .woof_container_inner h4').each(function(){
        $(this).append('<a class="clear_filters">Clear</a>');
    });

    // Extract parameter, pass it to function and generate new URL
    $('.woof_redraw_zone .woof_container_inner h4').click(function(){
        var url = window.location.href;
        var prefix = ("pa_");
        var key = $(this).clone().children().remove().end().text().toLowerCase();
        var param = prefix + key;
        var alteredURL = removeParam(param, url);
        console.log( removeParam(param, url) );
        // window.location.href = alteredURL;
    });

// Reference: Remove a parameter to the URL with JavaScript

    function removeParam(key, sourceURL) {
        var rtn = sourceURL.split("?")[0],
            param,
            params_arr = [],
            queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
        if (queryString !== "") {
            params_arr = queryString.split("&");
            for (var i = params_arr.length - 1; i >= 0; i -= 1) {
                param = params_arr[i].split("=")[0];
                if (param === key) {
                    params_arr.splice(i, 1);
                }
            }
            rtn = rtn + "?" + params_arr.join("&");
        }
        return rtn;
    }

So evidently `param` is not what you think it is, and again, did you try logging it to the console. — adeneo, Sep 28 '16 at 06:00
So `console.log(param, url)` is *"not successful"*, what does that mean ? — adeneo, Sep 28 '16 at 06:11
In console I am getting values for both the parameters. but couldn't find where the actual issue is. — Rick, Sep 28 '16 at 06:18
what about the type of each variable? you're using '===' comparison, which also compares type — Jameson the dog, Sep 28 '16 at 06:19
Jameson, you have the code, what do you recommend me to adjust in that? — Rick, Sep 28 '16 at 06:25
Jocob: here is the fiddle [link](https://jsfiddle.net/jz1dyh9r/) — Rick, Sep 28 '16 at 06:48
ok, found you're problem - you have spaces in your'e key string. change you're comparison to `param.trim() === key.trim()` and you're good to go — Jameson the dog, Sep 28 '16 at 06:59

score 1 · Accepted Answer · answered Sep 28 '16 at 07:07

You're comparison strings may have spaces and line breaks wrapping them, use trim() on the strings before comparing them

function removeParam(key, sourceURL) {
        var rtn = sourceURL.split("?")[0],
            param,
            params_arr = [],
            queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
        if (queryString !== "") {
            params_arr = queryString.split("&");
            for (var i = params_arr.length - 1; i >= 0; i -= 1) {
                param = params_arr[i].split("=")[0];
                if (param.trim() === key.trim()) { // compare trimmed strings
                    params_arr.splice(i, 1);
                }
            }
            rtn = rtn + "?" + params_arr.join("&");
        }
        return rtn;
    }

Pass parameter to function onclick jQuery

1 Answers1