How to collect an array of GET parameters separated by commas?

Hi! There is a form in which several dozen checkboxes.
<form method="get">
 <input tupe="checkbox" name="tags[]" value="1">
 <input tupe="checkbox" name="tags[]" value="2">
 <input tupe="checkbox" name="tags[]" value="3">
</form>


Now when the form is submitted I get this link into the address bar:
/page.html?tags%5B%5D=1&tags%5B%5D=2$tags%5B%5D=3
How to make this more beautiful?
/page.html?tags=1,2,3
August 19th 19 at 23:41
2 answers
August 19th 19 at 23:43
Solution
This is the URL-encoding. It is necessary for links/addresses race between the browser and the web server.
If you need to decode to case, for this is DecodeURIComponent
Thank you! And why chase links\addresses between the server and the browser, not enough parameters? - katlyn57 commented on August 19th 19 at 23:46
What changes You will have to do if you remove any checkbox or change its place in the markup? - Isabel.Parisi commented on August 19th 19 at 23:49
no... Checkboxes are tags, which are taken from the database and are generated on the php side - katlyn57 commented on August 19th 19 at 23:52
: this machine is happening. The browser encodes the URL before sending. Server ACC. comes already coded, if there is a spec. characters/non-Latin or something. Modern browsers, the idea is that in the address line yourself give you a link to normal view. How to continue with these data to work with, showed - alberta.Wolf18 commented on August 19th 19 at 23:55
August 19th 19 at 23:45
Solution
You can not submit the form, and to intercept the send event and reformat the data in its own way:

$( "form" ).on( "submit", function( event ) {
event.preventDefault();
 var tags=[];
$('input:checkbox:checked',this).each((i,e)=>{"tags".push(e.value)});
 var params = "tags=" + tags.join(','); // "tags=1,2,3" if all three selected
 // then either redirect the browser window.location=... or ajax'om send data
});


Fiddle.
What you need... but if along with the checkboxes you want to send other form data, just select each selectabe by id?

Usually I collect the form data via serialize(). This is convenient because do not need to change the js code when adding or removing items. Can Il once after serialize to change these checkboxes? - katlyn57 commented on August 19th 19 at 23:48
: can: decodeURIComponent(), then split the parameters by "&" character in pairs, then the symbol "=" to the key value, then for duplicate keys, collect the values in an array. Better to choose selectors ) - Isabel.Parisi commented on August 19th 19 at 23:51
there is the same .serializeArray() – returns an array of objects with name= and value=. But so far, collecting multiple tags[] into a single array. And they may not be if any checkbox is not marked. - katlyn57 commented on August 19th 19 at 23:54

Find more questions by tags HTMLJavaScriptjQuery