send data from form with attributes

Question

My data in my form will be inserted by javascript. These are li attributes. I want to send the data in these li attributes to an other php page. But that's not possible?

    function addProduct() {
            //var productid = document.getElementById('product').value;
            var product = products[type];
            //this is just a product placeholder
            //you should insert an item with the selected product info
            //replace productId, productName, price and url with your real product info
            var productAdded = $('<li class="product" name="product' + i + '">' +
                '<div class="product-image">' +
                '<a href="image">' +
                '<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
                '</div>' +
                '<div class="product-details">' +
                '<a style="color: black;">' + product + '</a>' +
                '<span class="price">€ ' + price + '</span><br>' +
                '<div class="quantity">' +
                '<label>Aantal: ' + qty + '</label> <div class="actions">' +
                ' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');
    
            cartList.prepend(productAdded);
            
        }

    <div class="cd-cart">
            <div class="wrapper">
                <header>
                    <h2>Winkelkar</h2>
                    <span class="undo">Verwijder product. <a href="#0">Ongedaan maken</a></span>
                </header>
    
                <div class="body">
                    <form id="formtosubmit" class="form-style-12" action="checkout.php" method="post">
                        <ul name="products">
                        <!-- products added to the cart will be inserted here using JavaScript -->
                        </ul>
                    </form>
                </div>
    
                <footer>
                    <a id="checkoutbtn" class="checkout btn" onclick="document.getElementById('formtosubmit').submit()"><em>Ga verder: €<span>0</span></em></a>
                </footer>
            </div>
        </div>

Answer 1

You can create <input type='hidden'/> element in between those <li> tags and write each product ID or product name to the value of that <input> tag. This way when you submit your form, those values will be captured.

EX:

function addProduct() {
        var productid = document.getElementById('product').value;
        var product = products[type];
        //this is just a product placeholder
        //you should insert an item with the selected product info
        //replace productId, productName, price and url with your real product info
        var productAdded = $('<li class="product" name="product' + i + '">' +
            '<div class="product-image">' +
            '<a href="image">' +
            '<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
            '</div>' +
            '<div class="product-details">' +
            '<a style="color: black;">' + product + '</a>' +
            '<span class="price">€ ' + price + '</span><br>' +
            '<div class="quantity">' +
            '<input type="hidden" value="'+productid+'" readonly name='productid[]'>' +
            '<label>Aantal: ' + qty + '</label> <div class="actions">' +
            ' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');

        cartList.prepend(productAdded);

    }

Now you may have noticed what is that name='productid[]' in input tag? That means create an array of every input value particular to that element. More information can be found here.

Another approach would be saving your selected product IDs into a cookie/session variable. Then your server side can access that information and process the cart accordingly. If you were to delete a product from the cart then make sure you update your session/cookie value as well.