CODEWITHSUNDEEP
javascripthtml
Francois J
Francois J

Reputation: 31

Javascript escape double quotes twice

I am having problems trying to display correctly the value of a text input field containing double quotes (").

Here is the code:

<script>
var locked;
function addHTML(html,id,replace){
    if(locked!=false){
        if(replace==true) document.getElementById(id).innerHTML = html;
        else document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + html;
    }
}
</script>
<DIV id="divvalues">
    <div onclick='javascript:addHTML("<INPUT type=\"text\" id=\"inputvalues\" name=\"values\" value=\"Click on me, \"in double quotes\", click on me\" required size=53 />","divvalues",true); document.getElementById("inputvalues").focus();'>
        <span>Click on me, "in double quotes", click on me</span>
    </div>
</DIV>

As a result, only Click on me, is displayed in the input. Any idea on how I should escape the double quotes inside the value attribute?

Upvotes: 2

Views: 1451

Answers (3)

Francois J
Francois J

Reputation: 31

The best solution I have found is to move the HTML outside the onclick attribute and place it inside a Javascript var:

<script>
var locked;
function addHTML(html,id,replace){
    if(locked!=false){
        if(replace==true) document.getElementById(id).innerHTML = html;
        else document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + html;
    }
}

var divvalueshtml = '<INPUT type="text" id="inputvalues" name="values" value="Click on me, &quot;in double quotes&quot;, click on me" required size=53 />';
</script>
<DIV id="divvalues">
    <div onclick='javascript:addHTML(divvalueshtml,"divvalues",true); document.getElementById("inputvalues").focus();'>
        <span>Click on me, "in double quotes", click on me</span>
    </div>
</DIV>

Upvotes: 0

Jared Price
Jared Price

Reputation: 5375

It will probably be easier for you to debug if you create a function in your script instead of doing everything in your onclick.

Instead I would start by doing something like this:

<div onclick='yourFunction()'>

And in your Javascript:

function yourFunction()
{
    // code
}

Upvotes: 1

Joe Rinehart
Joe Rinehart

Reputation: 763

The \"in double quotes\" is adding a " mark to you input tag. Should they be "?

Upvotes: 0

Related Questions