I am trying to update the quantity of the products in the shopping cart by changing the number in the dropdown. If the cart has two or more items then only the first one works and the qty doesn't change for the other items even after changing it in the dropdown. I am getting the corresponding "productid" and "size" from the HTML form and trying to manipulate the sqlite database using these three values. (Wondering if there is a way to get the "qty" value of only the item whose qty is being changed from the dropdown?) Since request.form.get() only sends the first value back I was thinking of using request.form.getlist(). But then I have to figure out how to enter the arrays(eg. qtychanged[],productid[] and size[] into the Cart1 table. (Attaching the HTML file as Template)

 @app.route("/updatecart", methods = [ "POST"])
 def updatecart():

    if request.method == "POST":

            qtychanged = request.form.get("qtydropdown")

            productid = request.form.get("productid")
            size = request.form.get("size")

            for rows in shoppingcart:
                if int(qtychanged) == 0:

                            shoppingcart = db.execute("update cart1 set qty = :qty where productid = :productid and size = :size",
                            productid = productid,
                            size = size,
                            qty = qtychanged)

                            shoppingcart = db.execute("delete from cart1 where qty = :qty", qty = qtychanged)

                            shoppingcart = db.execute("select * from cart1")

                            if not shoppingcart:
                                return apology("Cart is empty")

                if len(shoppingcart)!=0:

                            shoppingcart = db.execute("select * from cart1 where productid = :productid and size = :size",
                            productid = productid,
                            size = size)
                            shoppingcart = db.execute("update cart1 set qty = :qty where productid = :productid and size = :size",
                            qty = qtychanged,
                            productid = productid,
                            size = size)

                            shoppingcart = db.execute("select productid, name, size, qty, price, image, (qty * price) as total from cart1")
                            if not shoppingcart:
                                return apology("Cart is empty")

                            grandtotal = 0

                            for row in shoppingcart:

                                total = row["qty"] * float(row["price"])

                                grandtotal = grandtotal + total
                                return render_template("testcartlayout.html", shoppingcart = shoppingcart, total = total, grandtotal = grandtotal)

<!DOCTYPE html>

    <html lang="en">


     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

     <!-- documentation at http://getbootstrap.com/docs/4.1/, alternative themes at https://bootswatch.com/ -->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

     <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
     <!--<link href="/static/favicon.ico" rel="icon">-->

     <link href="/static/styles.css" rel="stylesheet">

     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

     <script type="text/javascript" src="/path/to/jquery.js"></script>
     <script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>



    <form action="/updatecart" method="post">

    {% for item in shoppingcart %}

    <div class="Tcard">
    <div class='container2'>
      <p style="text-align:center">{{ item. name }}</p>
      <p class = "image"><img src= "{{ url_for('static', filename = item.image) }}" alt="Top 1" width ="100px" height = "100px"></p>
      <p class="price">Price: ${{ item.price }}</p>

      <label for="qty">Qty:</label>

      <select name = "qtydropdown" class = "qtydropdown" id = "mySelect"  onchange='this.form.submit()'>
               <option value="{{ item.qty }}">{{ item.qty }}</option>
                <option value="0">0 - Remove</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>

            <noscript><input type="submit" value="Submit"></noscript>

          <p class = "fontgrp">Size: {{ item.size }}</p>
          <p class = "fontgrp"><b>Total Cost: {{ item.total | usd }} 

      <input id="productid" name="productid" type="hidden" value="{{ item.productid }}">
      <input id="size" name="size" type="hidden" value="{{ item.size }}">

     {% endfor %}

      <input class = "btn btn-primary" value = "Grand Total: {{ grandtotal | usd }}">
    <a href="/checkout" class="btn btn-primary" role="button" aria-pressed="true">Checkout</a>
    <!--<input form action = "/checkout" class="btn btn-primary" type="submit" value="Checkout">-->
  • There is nothing in the posted HTML that will send data back to the server nor is there a dropdown. Impossible to evaluate. – DinoCoderSaurus Nov 30 '20 at 12:30

Couple of things I can tell you right away.

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>

Both these files need to have valid paths.

<select name = "qtydropdown" class = "qtydropdown" id = "mySelect"  onchange='this.form.submit()'>

You are using a loop to generate the dropdowns, right.

So you will have like 3-4 of these selects.

Your code looks like this then (abbreviated)

<select name = "qtydropdown" class = "qtydropdown" id = "mySelect"  onchange='this.form.submit()'>...</select>

<select name = "qtydropdown" class = "qtydropdown" id = "mySelect"  onchange='this.form.submit()'>...</select>

<select name = "qtydropdown" class = "qtydropdown" id = "mySelect"  onchange='this.form.submit()'>...</select>

Do you see that your IDs (which should be unique) are all the same? Similar to the name "qtydropdown".

When you do the submit, they all try to update the same element. That's why it only works on the first.

Try to give numerate them like "mySelect1", "mySelect2", etc and "qtydropdown1", "qtydropdown2", etc.

This should remedy your problem.

  • I don't have a javascript in my form." onchange='this.form.submit()' " works as a substitute for a submit button, so if I change the dropdown value the qty changes automatically. – user14720865 Nov 30 '20 at 15:30
  • Got it! So there is a logic problem.I edited my original answer, so please check again. – Azumao Dec 1 '20 at 1:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .