5

Say I have a simple form like this:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <div id="search">
      <form method="GET" action="/super-action">
        <input type="text" name="q" />
      </form>
    </div>
  </body>
</html>

with an input like: @tags "Cinéma Whatever"

a form GET request results in a url that looks like: /super-action?q=%40tags+"Cinéma+Whatever"

Now I want to reproduce that with javascript in location.hash, with a pound sign instead of a slash, like: /super-action#q=%40tags+"Cinéma+Whatever"

But with the available functions, I get there results:

  • escape(input): @tags%20%22Cin%E9ma%20Whatever%22
  • encodeURI(input): @tags%20%22Cin%C3%A9ma%20Whatever%22
  • encodeURIComponent(input): %40tags%20%22Cin%C3%A9ma%20Whatever%22
  • $(form).serialize(), without q=: %40tags+%22Cin%C3%A9ma+Whatever%22

The question: How can I make an input value, like @tags "Cinéma Whatever", look like what a form GET request would do: %40tags+"Cinéma+Whatever" using javascript?

CC BY-SA 3.0
Improve this question
6
  • I don't understand exactly what you want, the GET URL has a ? while the string you'd like to make has a # in its place. Is it correct? You'd like to have the same string you'd have with a GET request but with the ? replaced by #?
    – Fabrício Matté
    Commented May 11, 2012 at 4:21
  • If you're willing to add a js library to your page, I may have a solution. I'd like to know if you want your encoded URL string to have a interrogation mark or a number sign first though.
    – Fabrício Matté
    Commented May 11, 2012 at 4:32
  • @Fabricio: What I am trying to achieve is a search form that works both with ajax and without, using the same query string in the url with a (#) or a (?). That way if someone bookmarks a url with the hash (#) and comes back, I fetch the search result with javascript by passing whatever is after that hash to the server with a (?). It might still work if special characters like "é" is "%E9", php might probably convert it on the server side. But I was hoping I could use the same conversion form GET does.
    – bksunday
    Commented May 11, 2012 at 13:00
  • A js library would be fine! And no i don't need an interrogation mark instead of the number sign. The value after the (#) sign might contain a question mark but just like form GET does, ? should be converted to %3F.
    – bksunday
    Commented May 11, 2012 at 13:05
  • My bad, I deleted my answer as I didn't see you wanted the é and " characters un-encoded as well. So which characters do you want encoded actually? Just the @ and white-space are encoded in your example string.
    – Fabrício Matté
    Commented May 11, 2012 at 21:49

1 Answer 1

Reset to default
4

According to RFC 1738, /super-action?q=%40tags+"Cinéma+Whatever" is not valid inside an URL:

Thus, only alphanumerics, the special characters "$-_.+!*'(),", and reserved characters used for their reserved purposes may be used unencoded within a URL.

That means that you can't produce a valid URL with that substring in it. You must encode the special characters " and é, otherwise the resulting string is not a URL.

The reason why you think this is valid might be that your browser plays tricks on you: It could be displaying the URL in partially encoded form to make it easier to read in the address bar. Try using a protocol analyzer like Wireshark to inspect the actual URL path sent across the network.

UPDATE: I quickly confirmed this, the HTTP header sent in reaction to a form submit is the following:

GET /?q=%40tags+%22Cin%C3%A9ma+Whatever%22 HTTP/1.1

So it is first UTF-8 encoded and then URL encoded.

CC BY-SA 3.0
Improve this answer
1
  • You are right, both google chrome and firefox are playing tricks on me . If I just select the url and copy it (CTRL-C), when I paste it anywhere else the " and é characters are both encoded. Thanks
    – bksunday
    Commented May 14, 2012 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.