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">×</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>