使用Javascript时出现“[object Object]”错误

Question

I am trying to add an item to my cart by clicking an 'addtocart' button that submits the required information to a table in the database which holds the items being added to the cart. The issue I am dealing with occurs with the name of the item, in which I am getting an error saying [object Object] rather than the name of the item. I'm not sure why it's doing this since the name is able to be printed to the screen with the names of the items, but it isn't able to store it into a variable to be stored into the database.

<form method="post" action="store.php">                
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><?= $row3[1] ?></h4>
                    <input type="hidden" id="hiddenName" name="hiddenName" value=""/>
                </div>
            <div class="modal-body text-right">
                <img id="image" src="<?= $row3[4] ?>" alt="<?= $row3[1] ?>" type="image" width: "200px;">
                <input type="hidden" id="hiddenImage" name="hiddenImage" value=""/>
                <p id="description"><?= $row3[2] ?></p>
                <input type="hidden" id="hiddenDesc" name="hiddenDesc" value=""/>
                <h3 id="price"><?= $row3[5] ?></h3>
                <input type="hidden" id="hiddenPrice" name="hiddenPrice" value=""/>
                <input id="quantity" name="quantity" class="quantity" type="text" value="1" name="quantity">
            </div>
            <div class="modal-footer">
                <input type="submit" id="addtocart" name="addtocart" class="btn btn-default"  value="Add to Cart"/>
            </div>
        </div>
    </div>
</div>
</form>

<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var name = button.data('item'); // Extract info from data-* attributes
        var description = button.data('desc');
        var price = button.data('price');
        var image = button.data('img');

        var modal = $(this);
        var title = modal.find('.modal-title').text(name);
        document.getElementById('image').src= image;
        document.getElementById('description').innerHTML = description;
        document.getElementById('price').innerHTML = price;

        document.getElementById('hiddenName').value = title;
        document.getElementById('hiddenPrice').value = price;
        document.getElementById('hiddenDesc').value = description;
        document.getElementById('hiddenImage').value = image;
    })
</script>

Answer 1

Beacuse where you are setting the title

var title = modal.find('.modal-title').text(name);  

The variable holds a reference to the .modal-title element and you set the value to the element, not the text of the element.

document.getElementById('hiddenName').value = title;

so you should be using name, not title

document.getElementById('hiddenName').value = name;