How to pass a string which contains HTML to an onClick event?

Question

I'm creating an element in my c# code, which contains a onclick event that copies the string parameter to the clipboard.

It works fine, the problem is when I have to pass an parameter that is a HTML code, with
and tags. It breaks my page, because of the quotes (') that may appear (like style and colspan tags).

The code I'm using is this:

string comment = row.Cells[1].Text;

Cells[0].Text += "<br/><a href='javascript:' onclick='javascript:CopyComment(" + comment + ")'>COPY</a>";

How can I pass a string with HTML as parameter and not break my page?

EDIT 1:

This is the HTML Code I'm passing as parameter:

> "<span style='color:#FF0000;'><b>COTAÇÃO</b></span><br />\r\n<br
> />\r\n<br />\r\nAssunto: Cotação / Assistência: 425595 / Placa:
> EAL8426<br />\r\n<br />\r\nSegue conforme solicitado:<br />\r\n<br
> />\r\n<span
> style='text-decoration:underline;'><b>ORIGEM:</b></span><br />\r\nRua
> Glauber Rocha, 39 - Jardim Alzira, São Paulo - SP, 03986-270, Brasil,
> 39<br />\r\n<br />\r\n<span
> style='text-decoration:underline;'><b>DESTINO:</b></span><br />\r\nR.
> Conselheiro Saraiva, 36 - Santana, São Paulo - SP, Brasil, 36<br
> />\r\n<br />\r\n<br />\r\n<b>Cotação 1</b><br />\r\nTempo de Chegada:
> 50<br />\r\n<br
> />\r\n<table>\r\n<tr>\r\n<td>Tarifa</td><td>Valor</td><td>Quantidade</td><td>Total</td>\r\n</tr>\r\n<tr>\r\n<td>Saída</td><td>R$
> 99,00</td><td>1</td><td>R$ 99,00</td>\r\n</tr>\r\n<tr>\r\n<td>KM
> (Excedente)</td><td>R$ 1,50</td><td>10</td><td>R$
> 15,00</td>\r\n</tr>\r\n<tr>\r\n<td>Pedágio</td><td>R$
> 20,00</td><td>1</td><td>R$ 20,00</td>\r\n</tr>\r\n<tr>\r\n<td>Horas
> Trabalhadas</td><td>R$ 46,00</td><td>2</td><td>R$
> 92,00</td>\r\n</tr>\r\n<tr>\r\n<td>KM (Deslocamento)</td><td>R$
> 1,50</td><td>10</td><td>R$
> 15,00</td>\r\n</tr>\r\n<tr>\r\n<td>Destombamento</td><td>R$
> 125,00</td><td>1</td><td>R$ 125,00</td>\r\n</tr>\r\n<tr>\r\n<td
> colspan='2'>&nbsp;</td><td>Total</td><td>366,00</td>\r\n</tr>\r\n</table>\r\n<br
> />\r\n\r\n<br />\r\nNo aguardo<br />\r\n<br />\r\nAtenciosamente\r\n"

this is my javascript function that copies the text (with the HTML format) to the clipboard

function CopiarComentario(html) {
    var tmpEl;
    tmpEl = document.createElement("div");

    // since we remove the element immediately we'd actually not have to style it - but IE 11 prompts us to confirm the clipboard interaction and until you click the confirm button, the element would show. so: still extra stuff for IE, as usual.
    tmpEl.style.opacity = 0;
    tmpEl.style.position = "absolute";
    tmpEl.style.pointerEvents = "none";
    tmpEl.style.zIndex = -1;

    // fill it with your HTML
    tmpEl.innerHTML = decodeHtml(html);

    // append the temporary node to the DOM
    document.body.appendChild(tmpEl);

    // select the newly added node
    var range = document.createRange();
    range.selectNode(tmpEl);
    window.getSelection().addRange(range);

    // copy
    document.execCommand("copy");

    // and remove the element immediately
    document.body.removeChild(tmpEl);
}

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

Have you tried passing it as a [verbatim sting](http://stackoverflow.com/a/3312007/4416750)? — Lews Therin, Aug 18 '16 at 17:25

score 1 · Answer 1 · answered Aug 18 '16 at 17:25

1

Cells[0].Text += "<br/><a href='javascript:' onclick='javascript:CopyComment(" + HttpUtility.HtmlEncode(comment) + ")'>COPY</a>";

Read more about HttpUtility.HtmlEncode here.

answered Aug 18 '16 at 17:25

serhiyb

4,753
2
15
24

My javascript function that copies to clipboard needs an HTML code, so it keeps the format in case of the person wants to put the text into an email, for example. – Eduardo Samoggin Aug 18 '16 at 17:38
You need to decode HTML inside your CopyComment function. Here is an example of how to do it http://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it – serhiyb Aug 18 '16 at 17:40
Never thought to decode on the client side. But now I get this error when i click: Uncaught SyntaxError: Unexpected token } But there's no '}' on my code. – Eduardo Samoggin Aug 18 '16 at 17:53
I'm afraid I need to see the code to help with that. – serhiyb Aug 18 '16 at 17:55

How to pass a string which contains HTML to an onClick event?

1 Answers1