Passing string with apostrophe from PHP into JavaScript function

Question

A simple problem that I just can't find the 'right' answer too.

I have a PHP script that reads people's names from a database, and display them in a table. In each row, I have hyperlinked the person's name to a JavaScript function that displays a popup with the person's name as the title - the PHP code and resulting html follows:

$name = $results['name'];
echo '<a href="javascript:void(0)" onclick="popup(this, '\' . $name . '\')">' . $name . '</a>';

With html:

<a href="javascript:void(0)" onclick="popup(this, 'Steve Smith')">Steve Smith</a>

Everything works fine, except when I hit a name that has a hyphen, such as "Bryce D'Arnoud" which results in the apostrophe breaking the html. To get around this issue, I am using the PHP addslashes() function, resulting in the following code & html:

$name = $results['name'];
echo '<a href="javascript:void(0)" onclick="popup(this, '\' . addslashes($name) . '\')">' . $name . '</a>';

With html:

<a href="javascript:void(0)" onclick="popup(this, 'Bryce D\'Arnoud')">Bryce D'Arnoud</a>

Everything functions fine, but for some reason, the JavaScript is not removing the escape character, and in the popup() function, if I alert out name, I see "Bryce D\'Arnoud"

function popup(t, name) {
  alert(name);
}

Any suggestions as to where I am going wrong?

Eli · Accepted Answer · 2012-03-05 02:54:11Z

3

First, life would be a lot easier if you didn't mix JavaScript in your markup. Instead, have PHP form semantic markup, and access the data with JavaScript:

$name = $results['name'];
echo '<a href="#" class="popup" data-name="' . $name . '">' . $name . '</a>';

And then access the value (am using jQuery for this for terseness):

$('.popup').click(function(e) {
    e.preventDefault();

    alert($(this).attr('data-name'));
});

And in native JS (I think):

document.getElementsByClassName('popup').onclick = function (e) {
    e = e || window.event;

    e.preventDefault();

    alert(this.getAttribute('data-name'));
};

answered Mar 5, 2012 at 2:54

Eli

17.8k4 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Unpossible Over a year ago

Interesting... but there's no way that code generates valid HTML, is there?

Eli Over a year ago

Sure it does, data- attributes are a standard part of HTML5.

Unpossible Over a year ago

Thanks. Was hoping to avoid having to load jQuery to do a simple onclick call, but will keep this solution as my fallback.

nnnnnn Over a year ago

@Paul - You don't need to include jQuery to do this. Assuming you want to keep the inline onclick handler just say onclick="popup(this)" and then within your popup(t) function get the name with t.getAttribute('data-name') (remove the second parameter to popup() and set the data-name attribute as Eli said).

Eli Over a year ago

My last code snippet doesn't have any jQuery in it at all, and it still doesn't mix markup and JS.

|

inhan · Accepted Answer · 2012-03-05 03:11:12Z

3

Wouldn't escaping the double quotes work? (not tested)

echo "<a href=\"javascript:void(0)\" onclick=\"popup(this,'$name')\">$name</a>";

EDIT: Sorry for missing the point. Using preg_replace to replace the single quotes with their HTML entities might do it, though.

echo '<a href="javascript:void(0)" onclick="popup(this,\'' . preg_replace("/'/",'&#39;',$name) . "')\">$name</a>";

EDIT 2 In fact converting all those in $name might be cleaner:

$name = preg_replace("/'/", '&#39;', $results['name']);
echo "<a href=\"javascript:void(0)\" onclick=\"popup(this,'$name')\">$name</a>";

edited Mar 5, 2012 at 3:11

answered Mar 5, 2012 at 2:56

inhan

7,5002 gold badges26 silver badges35 bronze badges

1 Comment

Shaddy Over a year ago

It helps me a lot. @inhan

Collectives™ on Stack Overflow

Passing string with apostrophe from PHP into JavaScript function

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related