Javascript encodeURIComponent() not encoding spaces

Question

I have a form with a text input with an id txtPlace that users will be entering input into that will be passed to the server as a url query. I'm trying to use encodeURIComponent(), but it is not encoding spaces. Here's my simplified code

<div class="searchBoxRow">
  <input type="text" id="txtPlace" size="55" placeholder="Enter place to search"/>
  <a href="#" id="btnSearch">Search</a> 
</div>

Here is my javascript

<script type="text/javascript">
  $(function () {
     $('#btnSearch').on('click', function (e) {
        e.preventDefault;
        var place = encodeURIComponent($('#txtPlace').val());
        var url = "http://example.com?place=" + place;
        document.location.href = url;
     });
  });    
</script>

If a user types ACME Co.,New York, NY, the generated url is

http://example.com?place=ACME Co.%2CNew York%2C NY

See the spaces are unencoded? I even tried to add place = place.replace(/\s/g, '+') but that doesn't seem to work after encoding. What am I doing wrong? Thanks for your assistance.

Update:

Blame Firefox! Found out that the spaces were being properly encoded but Firefox is not displaying spaces as encoded even though they are. Tested in Internet Explorer 10 and Google Chrome and they both display spaces in their encoded format. Thanks Adam for the fiddle http://jsfiddle.net/VYDcv/

Answer 1

I'm not sure what you're seeing, but encodeURIComponent does escape space characters.

See this fiddle, based on your code: http://jsfiddle.net/VYDcv/

If you type "Hello world", it will alert you with the space replaced by a %20.

Alert results: http://example.com?place=Hello%20World

When you set your browser's document.location.href, it may be changing the %20 back to a space in the address bar, but it IS being escaped by the javascript.