dynamic hyperlink / mailto

Question

EDIT 11/20/2017: The code provided by LOVEZ works great but is there a way to 'refresh' the screen to avoid multiple "Get Link" on screen?

As a workaround until I can figure out how to refresh the page, I just added line 10 and changed line 12

---ORIGINAL POST BELOW---

I'm trying to create a dynamic mailto link based on user input when I hover over the "Get Link" it seems to generate it correctly, but the link in the email body is cut off. Below code is what I tried but it seems to refresh my SharePoint page after it generates the link.

<input id="myInput" type="text">
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {

var myID = document.getElementById("myInput").value;
    var msgBody = "https://tenant.sharepoint.com/Lists/ListName/Item/editifs.aspx?DefaultView=ManagerComments&ID="+myID+"&SOURCE=https://tenant.sharepoint.com/SitePages/SitePage.aspx";
var myLink = "mailto:?subject=Pending Approvals&body="+msgBody;



var x = document.createElement("A");
var t = document.createTextNode("Get Link");
x.setAttribute("href", myLink);
x.appendChild(t);
document.body.appendChild(x);
}
</script>

Answer 1

Use the code below:

<input id="myInput" type="text">
<button onclick="myFunction()" type="button">Try it</button>
<span id="GetLink"></span>
<script type="text/javascript">
function myFunction() {
    var myID = document.getElementById("myInput").value;
    var msgBody = "https://tenant.sharepoint.com/Lists/ListName/Item/editifs.aspx?DefaultView=ManagerComments&ID="+myID+"&SOURCE=https://tenant.sharepoint.com/SitePages/SitePage.aspx";
    var myLink = "mailto:?subject=Pending Approvals&body="+encodeURIComponent(msgBody);
    var linkHtml="<a href='"+myLink+"'>Get Link</a>";
    document.getElementById("GetLink").innerHTML=linkHtml;
}
</script>

Answer 2

Try using the javascript encodeURIComponent() method:

var msgBody = encodeURIComponent("https://tenant.sharepoint.com/Lists/ListName/Item/editifs.aspx?DefaultView=ManagerComments&ID="+myID+"&SOURCE=https://tenant.sharepoint.com/SitePages/SitePage.aspx");

You may also need to double-encode the value of SOURCE= as well, depending on how that parameter is being used.

Answer 3

To avoid multiple Get Links on button click, use below:

Add $("#GetLink a").remove();

before this:

var myID = document.getElementById("myInput").value;