Current location path as a url parameter

Question

I need to put a link out from a corporate site to a surveymonkey survey. Our site uses a proprietary CMS limiting me from adding any proper function or third party plugin.

After evaluating options like those exposed in this other question , I believe I call the correct javascript function but everytime I open my CMS, the link duplicates itself... leading me to think I've done something inapropriate.

Things look acceptable on the JSFiddle demo I put together for this question but I'm hoping you'd have a more elegant solution in mind so I could try options !

<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + " target='_blank'>Test - survey</a>");
</script>

Answer 1

Try this - it will probably not do what you want in one go, but it will hopefully isolate your problem so that you can better pinpoint what's going wrong:

HTML:

<div id="link"></div>

Javascript:

var SURVEYID = 3
var a = document.createElement("a");

a.innerHTML = "Test - survey";
a.href = "www.surveymonkey.com/r/" 
  + SURVEYID 
  + "?url=" 
  + window.location.pathname 
  + "&target=_blank"

document.getElementById("link").appendChild(a)

I'm afraid there can be multiple things going wrong, but I hope you can now distinguish between the various parts that your URL is built up from.

Answer 2

This is mostly just a theory because I don't know your CMS or how it works, but I'm assuming that the CMS is inlining the javascript, executing it, and retaining that as its content along with the script. This would create that duplication. The original intent of using document.write I would assume was to completely replace the content; but if it's inlined, it only appends. An external script would completely replace. See below:

 All of this text is retained. <script type="text/javascript"> document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>"); </script> 

In this demo, we use document.body.innerHTML instead. This will replace the content completely.

 None of this text will be retained. <script type="text/javascript"> document.body.innerHTML = "<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>"; </script> 

If true, complete replacement of the body content is your goal, innerHTML is probably what you need.

Edit + Warning:

This may make the page inaccessible from the CMS depending on how it's built. It may make editing the page impossible.

Edit

Here's a better solution. Just set the href of the anchor by first getting it by the ID. This was based off of Sven ten Haaf's Answer .

 <a href="#" id="__smlink" target='_blank'>Test - survey</a> <script> document.getElementById('__smlink').href = "https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname; </script>