David
David

Reputation: 10738

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
                });

                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>

Upvotes: 2

Views: 2955

Answers (3)

ramsvidor
ramsvidor

Reputation: 1480

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.

Upvotes: 0

Sam Hanes
Sam Hanes

Reputation: 2839

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.

Upvotes: 2

Christian
Christian

Reputation: 19740

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>

Upvotes: 0

Related Questions