How do I pass a URL with multiple parameters into a URL?

JavascriptHtmlQuery Parameters

Javascript Problem Overview


Basically I'm trying to pass a URL like this:

www.foobar.com/?first=1&second=12&third=5

into a URL like this:

http://www.facebook.com/sharer.php?&t=FOOBAR&u=http://www.foobar.com/first=12&sec=25&position=2

It only recognizes the first parameter. I'm having the same problem with LinkedIn and Twitter sharing, so it must be something I'm doing wrong.

Javascript Solutions


Solution 1 - Javascript

Rather than html encoding your URL parameter, you need to URL encode it:

http://www.facebook.com/sharer.php?&t=FOOBAR&u=http%3A%2F%2Fwww.foobar.com%2F%3Ffirst%3D12%26sec%3D25%26position%3D

You can do this easily in most languages - in javascript:

var encodedParam = encodeURIComponent('www.foobar.com/?first=1&second=12&third=5');
// encodedParam = 'http%3A%2F%2Fwww.foobar.com%2F%3Ffirst%3D12%26sec%3D25%26position%3D'

(there are equivalent methods in other languages too)

Solution 2 - Javascript

You are missing the ? in the second URL (Also, it should be URL-encoded to be %3F).

Also, I believe that the remaining & need to be URL, not HTML-encoded. Change &second=12&third=5 to %26second=12%26third=5 and everything should just work.

This:

&u=http://www.foobar.com/first=12&sec=25&position=2

should be:

&u=http://www.foobar.com/%3Ffirst=12%26sec=25%26position=2

Solution 3 - Javascript

In your example parts of your passed-in URL are not URL encoded (for example the colon should be %3A, the forward slashes should be %2F). It looks like you have encoded the parameters to your parameter URL, but not the parameter URL itself. Try encoding it as well. You can use encodeURIComponent.

Solution 4 - Javascript

In jQuery, you can use:

let myObject = {first:1, second:12, third:5};
jQuery.param(myObject);

Doc: http://api.jquery.com/jquery.param/ The output: first=1&second=12&third=5 This will format it, whatever your object contain.

Solution 5 - Javascript

I see you're having issues with the social share links. I had a similar issue at some point and found this question, but I don't see a complete answer for it. I hope my javascript resolution from below will help:

I had default sharing links that needed to be modified so that the URL that's being shared will have additional UTM parameters concatenated.

My example will be for the Facebook social share link, but it works for all the possible social sharing network links:

The URL that needed to be shared was:

https://mywebsitesite.com/blog/post-name

The default sharing link looked like:

$facebook_default = "https://www.facebook.com/sharer.php?u=https%3A%2F%2mywebsitesite.com%2Fblog%2Fpost-name%2F&t=hello"

I first DECODED it:

console.log( decodeURIComponent($facebook_default) );
=>
https://www.facebook.com/sharer.php?u=https://mywebsitesite.com/blog/post-name/&t=hello

Then I replaced the URL with the encoded new URL (with the UTM parameters concatenated):

console.log( decodeURIComponent($facebook_default).replace( window.location.href, encodeURIComponent(window.location.href+'?utm_medium=social&utm_source=facebook')) );

=>

https://www.facebook.com/sharer.php?u=https%3A%2F%mywebsitesite.com%2Fblog%2Fpost-name%2F%3Futm_medium%3Dsocial%26utm_source%3Dfacebook&t=2018

That's it!

Complete solution:

> $facebook_default = $('a.facebook_default_link').attr('href'); > > $('a.facebook_default_link').attr( 'href', decodeURIComponent($facebook_default).replace( window.location.href, encodeURIComponent(window.location.href+'?utm_medium=social&utm_source=facebook')) );

Solution 6 - Javascript

You have to escape the & character. Turn your

&

into

&

and you should be good.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDormoTheNordView Question on Stackoverflow
Solution 1 - JavascriptDexterView Answer on Stackoverflow
Solution 2 - JavascriptSean VieiraView Answer on Stackoverflow
Solution 3 - JavascriptjustktView Answer on Stackoverflow
Solution 4 - JavascriptSSL46View Answer on Stackoverflow
Solution 5 - JavascriptTheoPlaticaView Answer on Stackoverflow
Solution 6 - JavascriptjonezyView Answer on Stackoverflow