Home/ Questions/Q 6645755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T00:19:43+00:00

I had stackoverflow help me with a javascript function in my last question. The

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0