Supplying string parameters that may contain special characters to a javascript function

Question

I need to pass strings that may contain special characters to a Javascript function as below.

function setEditMode(countryName, countryCode)
{
    document.getElementById("txtCountryName").value=countryName;
    document.getElementById("txtCountryCode").value=countryCode;        
}

<input id="txtCountryName" name="txtCountryName" type="text" maxlength="50"/><br/>

<input id="txtCountryCode" name="txtCountryCode" type="text" maxlength="2"/><br/>               

<input type="button" value="Submit" id="btnEdit" name="btnEdit" onclick="setEditMode('&#039;xx&#039; &#034;yy&#034; # $', '&#034;&#039;');" />

When the button is clicked the two parameters of type string that contain special characters need to be supplied to the setEditMode() Javascript function. The strings need to be escaped. I have tried using the escape() function but it didn't work. Is there a way to pass such parameters to a function? (I'm dealing with JSP).

[Those parameters of the setEditMode() function correspond to 'xx' "yy" # $ and "' respectively].

Answer 1

The parameters you show in your sample contains html entities. Are you trying to decode them? There is no native method in Javascript to do that, but you can use the following code snippet (requires jQuery):

 $("<div>").html("&#034;").html();

In your case:

 var countryName = $("<div>").html(countryName).html();
 var countryCode = $("<div>").html(countryCode).html();

Or use a generic function:

function decodeHtmlEntities(value)
{
   return $("<div>").html(value).html();
}

and

function setEditMode(countryName, countryCode)
{
    document.getElementById("txtCountryName").value=decodeHtmlEntities(countryName);
    document.getElementById("txtCountryCode").value=decodeHtmlEntities(countryCode);        
}

Or use this function: http://phpjs.org/functions/html_entity_decode:424 if you're not in the mood for creating div tags with jQuery.

Edit: Based on your comment. Seems to be a problem with entities for " and ' in inline script. You can solve it by calling a method like this:

<input type="button" value="Submit" id="btnEdit" name="btnEdit" onclick="setEditModeWrapper()" />
<script type="text/javascript">
    function setEditModeWrapper()
    {
        setEditMode('&#039;xx&#039; &#034;yy&#034; # $', '&#034;&#039;');
    }
</script>   

And combine this solution with the decoding functions above if you want those ' to be decoded in the input fields.

Or more classy:

<input type="button" value="Submit" class="submitBtn" id="btnEdit" name="btnEdit" data-countryname="&#039;xx&#039; &#034;yy&#034; # $" data-countrycode="&#034;&#039;" />

<script tyoe="text/javascript">
$(".submitBtn").on("click", function(e)
{
    var btn = $(e.currentTarget);
    var countryName = btn.attr("data-countryname");
    var countryCode = btn.attr("data-countrycode");
    setEditMode(countryName, countryCode);
});
</script>

Place the script tag at the bottom of the page and it will handle all your submit buttons based on their data-countryname and data-countrycode attributes. Render them in the same way you render your data in the onclick handler.