Coded URL with square brackets. Different behavior in Chrome / Firefox / IE

Question

I have a link similar to this (it's a little ugly because it's a URL)

<a href="/items?fc%5B%5D=12345&amp;fc%5B%5D=56789&amp;utf8=%E2%9C%93">foo</a> 

To be a little understandable, it is encoded by a URL and converted to

 <a href="/items?fc[]=12345&fc[]=56789&utf8=✓">foo</a> 

When the form submits, the destination URL looks different in different browsers:

In Firefox, it looks like the one you want:

 http://mydomain/items?fc[]=12345&fc[]=56789&utf8=✓ 

In Chrome, square brackets are shown URL-encoded (which gives very ugly and unprofessional looking addresses when using many of them).

 http://mydomain/items?fc%5B%5D=12345&fc%5B%5D=56789&utf8=✓ 

In IE9 (and later), everything is displayed in URL encoding:

 http://mydomain/items?fc%5B%5D=12345&fc%5B%5D=56789&utf8=%E2%9C%93 

I can live with the "utf8 = ..." part, since this is only a problem in IE. But none of the browsers have processing problems when the square brackets are explicitly entered in the URL, so I don’t understand why Chrome and IE, but Firefox should not show the brackets with URL encoding.

Since the html form code is the same in all browsers, I believe this is related to browsers, not the site (in this case, the Ruby on Rails site)

EDIT: Therefore, to clarify my current questions: Why is this different? Is there any way to make it look good, at least in Chrome? This might be an ugly fix, rather than URL escaping in href = "...", but I suppose this contradicts URL encoding rules?

Answer 1

How you want to share these links (subject to status), I assume that you expect your links to be shared, linked to web pages, copied, emailed, etc.

It is likely that even outside the browser (say where your links are copied to other pages, emails, etc.), some encoding will happen. You may have to admit that ugliness will appear somewhere if you have to use these characters.

Answer 2

Please correct me if I am wrong, but one of the ways I seem to have worked on this problem is to catch the values ​​of the POSTed form and convert them to GET using PHP. So, for example, you can use a form with the POST method, for example:

 <form action="" method="post"> <input type="text" name="fc[]" /> <input type="submit" value="Submit" /> </form> 

Then fill in the form values ​​after submitting, create a GET request using PHP and redirect the user:

 <?php if($_POST['fc']) header('Location: ?'.urldecode(http_build_query($_POST))); ?> 

This, of course, is for specific scenarios (and maybe a little beyond the scope of the OP question), but it seems to work well in my case.