How do I encode a URL in JavaScript?

Question

I want to implement a polyvore share button into a shopping cart. Some variable values are not being passed when the script executes (description and price) and I was told that URL encoding could be a solution. Can anyone share any leads on how to apply it in JavaScript alone to my snippet? Thanks in advance.

<a href="http://www.polyvore.com/cgi/add?title=%%GLOBAL_ProductName%%&url=http://lilaboutique.co.uk/products/%%GLOBAL_ProductName%%&imgurl=%%GLOBAL_ThumbImageURL%%&desc=%%GLOBAL_ProductDesc%%&price=%%GLOBAL_ProductPrice%%">
<img src="http://cdn.polyvore.com/rsrc/img/favicon.png"></a> 

• gen_Eric: See: stackoverflow.com/questions/332872/…

Answer 1

You can use encodeURIComponent to encode the specific querystring values.

var url = "http://www.polyvore.com/cgi/add?title=" 
 + encodeURIComponent('%%GLOBAL_ProductName%%') 
 + "&url=" + encodeURIComponent("http://lilaboutique.co.uk/products/" 
 + encodeURIComponent('%%GLOBAL_ProductName%%') 
 + "&imgurl=" + encodeURIComponent('%%GLOBAL_ThumbImageURL%%') 
 + "&desc=" + encodeURIComponent('%%GLOBAL_ProductDesc%%') 
 + "&price=" + encodeURIComponent('%%GLOBAL_ProductPrice%%'));

• elramirez: var url = "polyvore.com/cgi/add?title=" + encodeURIComponent(%%GLOBAL_ProductName%%) + "&url=" + encodeURIComponent("lilaboutique.co.uk/products" + encodeURIComponent(%%GLOBAL_ProductName%%) + "&imgurl=" + encodeURIComponent(%%GLOBAL_ThumbImageURL%%) + "&desc=" + encodeURIComponent(%%GLOBAL_ProductDesc%%) + "&price=" + encodeURIComponent(%%GLOBAL_ProductPrice%%)); var img = "<img src="cdn.polyvore.com/rsrc/img/favicon.png">"; document.write(img.link(url))
• elramirez: the above does not render the snippet. What am I doing wrong implementing your variable? THanks for the help.
• Brian Dukes: First, I'm assuming that the values in %% are getting replaced before we get here. You'll probably need to wrap this in quotes so that they're actually strings that you're encoding. Secondly, your method for creating the image and wrapping it in a link isn't going to work. I would suggest having the <a><img/></a> structure that you had before, then find the <a> (via document.getElementById, jQuery selector, etc) and update its href attribute to the url that you create.
• Brian Dukes: Also, you'll need to make sure that the %% values don't have quotes in them, so that you can successfully quote them in JavaScript...
• elramirez: My main limitation is that this is a served template system (bigcommerce) to which I have no access to server side scripts, so mostly have been guess work to my best knowledge trying to figure out the corresponding variables needed to add the polyvore share button. The variables that I have used render the proper content that I need for the script but now how to make it work with the share button has been another story.

Answer 2

i use this library they have a lot of good things including the urlencode

Answer 3

See escape() and unescape().

To remove "%", you can do this:

"http://www.polyvore.com/cgi/add?title=%%GLOBAL_ProductName%%&url".replace(/%/g, "")