Function parameters that include quotes

[loorp]

hi there,

I'm dynamically constructing(PHP) an img element with an onClick event-handler which calls a JavaScript function.

Code: Select all

$output_txt .= "<td><img src='./usr_img/tb_".$row['img_id'];
$output_txt .= ".jpg' onClick='changeImg(".$row["img_id"].", \"".$row["img_title"]."\", \"";
$output_txt .= $row["img_subtitle"] . "\");'";

my JS function:

Code: Select all

function changeImg(imgID, title, subtitle)
{
    document.getElementById('mainImg').style.backgroundImage = "url('./usr_img/" + imgID + ".jpg')";
    document.getElementById('mainTitle').firstChild.nodeValue = "";
    document.getElementById('mainTitle').firstChild.nodeValue += title; 
    document.getElementById('mainSubtitle').firstChild.nodeValue = "";
    document.getElementById('mainSubtitle').firstChild.nodeValue += subtitle;    
}

A major problem arises whenever the title or subtitle vars include quotes.
I use the htmlspecialchars php function to change the quotes to their html entities, which i've verified in the page source,
but it seems the JS function converts them back to regular characters and then dies upon finding a quote.

any help would be greatly appreciated.

[Ryan Fait]

You can escape quotes in both PHP and javascript:

Code: Select all

var html = "<img src=\"logo.jpg\" width=\"120\" height=\"40\" alt=\"Company X\" />";

[Ryan Fait]

Oh, and if you've already tried that, attempt to use double slashes somewhere in there.

Code: Select all

"<img src=\\"logo.jpg\\" width=\\"120\\" height=\\"40\\" alt=\\"Company X\\" />"

[loorp]

As you can see from the code, I am already escaping one set of quotes.
at the moment, by using,

Code: Select all

\"

I am able to pass text through that contain single quotes.
Strings containing double quotes still die.

if I change it to

Code: Select all

\'

The I am able to pass through strings containing double quotes but single quotes in the string still kills the function.

The question is how to have a javascript function accept an HTML entity in the parameter and not convert it to it's corresponding character.

Here is my JavaScript function call in the resultant HTML page

Code: Select all

onClick='changeImg(138, "There's some goin"down", "HOwZ&at");'

and here is the JS error

Error: missing ) after argument list
Source File: ./site/img_gallery.php?page=2
Line: 1, Column: 39
Source Code:
changeImg(138, "There's some goin"down", "HOwZ&at");

[ukgeoff]

onClick='changeImg(138, "There's some goin"down", "HOwZ&at");'

Look at the bit I've highlighted. The single quotes are seen as matching and what's between them is taken as your function so the error message is quite right.

[loorp]

thanks for the reply.

Yes the error message is totally understandable.

I would however like to resolve this.
I've tried addslahes in PHP to slash out that first ' but then the resulting html test is
There\'s some...

Is there a "stripslashes" function available in JS?

Thanks

[ukgeoff]

Try this format:

Code: Select all

onClick="changeImg(138, 'There''s some goin down', 'HOwZ&at');"

NOTE: That's two single quotes between the e and s in There''s and I have taken oout the ".

[Ryan Fait]

Yes, stripslashes() is a PHP function.