decodeURIComponent in form querystring

Question

When i submit my form it will add hidden input as query string in browser url.

$('form').on("submit", function(event) {
    event.preventDefault();
    // what i tried
    
    console.log($(this).attr('action'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET">
<input type="hidden" name="d" value="2,1">
<input type="submit" value="Submit"/>
</form>

The result for this example is:

/box?d=2%2C1

But i don't want to see %2C (it's comma), i know about decodeURIComponent but i have know idea how to grab this form action and use this component on it, i tried this:

decodeURIComponent($(this).attr('action'));

But it return undefined.

Goal:

1. get form action + query string and use decodeURIComponent on it to remove %2C OR
2. remove %2C in query string in url with comma directly.

I want this result:

/box?d=2,1

Answer 1

You should only decode URIs server-side or if you receive this request in your client somehow, never on submit. URIs are encoded for safe "transport" (sometimes must be explicitly encoded). Code behavior is as expected or I fail to see your point.