passing quotes into a javascript function
I had stackoverflow help me with a javascript function in my last question. The function created a div, then appended two form input fields into the newly created div. The function took in 4 arguments. One of which is the value of the form input field. The problem is if a single quote(apostrophe) is in the value it breaks the function. I'm developing in PHP and using jQuery. I've tried addslashes(), addcslashes($text,'"'), and json_encode() which all work great for double quotes but not single quotes. What am i doing wrong?
Link-1 is broken because of an apostrophe. Link-2 works as is, with its "Soda" value.
Example:
<?php
$text = "I'm Frustrated";
$text = addslashes($text);
?>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item_box1{
width: 300px;
margin: 0 auto;
height: 100px;
border: 1px solid blue
}
#item_box2{
width: 300px;
margin: 0 auto;
height: 100px;
border: 1px solid red
}
.link-button {
color: rgb(0, 0, 255);
cursor: pointer
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
<script type="text/javascript">
function add_item( code, title, price, divbox )
{
var idtag, item_title, item_price, item_code;
// Generate an id based on timestamp
idtag = "div_" + new Date().getTime();
// Generate a new div.
$( divbox ).append( "<div id=\"" + idtag + "\"></div>" );
if ( divbox == "#item_box1" )
{
item_title = $("<input/>", {
type: 'text',
name: "box1_item_title[]",
value: title
});开发者_JS百科
item_price = $("<input/>", {
type: 'text',
name: "box1_item_price[]",
value: price
});
// Show in the document.
$( "#" + idtag ).append( item_title, item_price );
}
else
{
item_code = $("<input/>", {
type: 'text',
name: "box2_item_code[]",
value: code
});
item_title = $("<input/>", {
type: 'text',
name: "box2_item_title[]",
value: title
});
// Show in the document.
$( "#" + idtag ).append( item_code, item_title );
}
}
</script>
</head>
<body>
<a class="link-button" onclick="return add_item('xyz', "<?php echo $text;?>", '45.99', '#item_box1');">Add Item to Box 1</a>
<br>
<a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
<br>
<br>
<div id='item_box1'></div>
<div id='item_box2'></div>
</body>
The source of the page ends up looking like this:
<a class="link-button" onclick="return add_item('xyz', "I\'m Frustrated", '45.99', '#item_box1');">Add Item to Box 1</a>
In the onclick attribute of link 1, you're using an unescaped double-quoted JavaScript string inside a double-quoted HTML attribute. The onclick attribute ends up getting set to return add_item('xyz', and the remainder of the open tag isn't valid HTML. Changing the double quotes around the PHP tag to single quotes should fix that problem.
The resulting attribute definition would then be
onclick="return add_item('xyz', 'I\'m Frustrated', '45.99', '#item_box1');"
I'm pretty sure that's valid both for HTML and JavaScript.
You're encapsulating a string with a single quote inside double quotes, so you don't need to add slashes. That code is now trying to escape a character that doesn't need to be escaped.
Either don't add slashes, or encapsulate within single quotes, EG:
<a class="link-button" onclick="return add_item('xyz', '<?php echo $text;?>', '45.99', '#item_box1');">Add Item to Box 1</a>
As @Sam said above, try just doing this:
<a class="link-button" onclick="return add_item('xyz', '<?php echo $text;?>', '45.99', '#item_box1');">Add Item to Box 1</a>
It should work fine.
加载中,请稍侯......
精彩评论