How to insert multiple rows of data from dynamically generated rows into a database using Python Django

Question

I have a Javascript function (addItem) that allows a user to add any number of dynamically generated rows of data and fill in the necessary fields required. See code below

                                <div class="modal-body">
                                    <table class="table order-list table-striped" id="myTable">
                                        <thead>
                                            <tr>
                                                <th>Item</th>
                                                <th>Quantity</th>
                                                <th>Price</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                            <tbody id="addItems">

                                        </tbody>
                                    </table>
                                    <table>
                                        <tbody>
                                            <tr>
                                                
                                                <td colspan="5" style="text-align: left;">    
                                                    <button onclick="addItem();" class="btn btn-sm btn-success" id="sspusd1" value="Add Row"><i class="fa fa-plus"></i>Add Row</button>
                                                </td>
                                                <td colspan="5" style="text-align: left;">    
                                                   
                                                </td>

                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

function addItem() {
    renumber++;
    var html = "<tr>";
        
        html  += "<td><select class='form-control'>{% for stock in stocks %}<option class='dropdown-item' value='{{stock.inventoryPart}}'>{{stock.inventoryPart}}</option>{% endfor %}</select></td>";
        html  += "<td><input type='number' class='form-control' onblur='lineTotal(this);' value='0' name='quantity[]'/></td>";
        html  += "<td><input type='text' class='form-control' onblur='lineTotal(this);' value='0' name='price[]'/></td>";
        html  += "<td><input type='text' id='lineTotal' class='form-control' value='0' disabled name='total[]' /></td>";

        html += "</tr>";
        document.getElementById("addItems").insertRow().innerHTML = html;
    };

However, One is able to insert any number of rows they want and insert the necessary data into the fields available.

The problem is that I am unable to capture and store the dynamic information entered into these dynamic rows since Django is unaware of how many rows a user has created.

The aim is to be able to store the data from the created dynamic rows inserted by the user, into the database using Django

Below is the code from my views

def customers(request):
      
if request.method == 'POST':
    if 'Receipttotal' in request.POST:
        
        stocksArr = request.POST.getlist('stock')
        quantityArr = request.POST.getlist('quantity')
        priceArr = request.POST.getlist('price')
        totalArr = request.POST.getlist('total')

        print("---Array Data---")
        print(stocksArr)
        print(quantityArr)
        print(priceArr)
        print(totalArr)

So the print statements output an empty list.

How possible is this functionality? I would like assistance on this. Thanks.

Can you share also your view? Proabably you should use `request.POST.getlist('quantity')` instead of `request.POST.get('quantity')` — Giorgio Scarso, Sep 06 '22 at 15:10
Entirely possible with just Django and Javascript. Have a look at: https://stackoverflow.com/a/669982/18020941 — nigel239, Sep 06 '22 at 17:42
@GiorgioScarso the `request.POST.getlist('quantity')` returns it as an empty list ( [ ] ) how can i solve this or what would be the reason? — Jordan Kinobe, Sep 07 '22 at 06:22
@GiorgioScarso, Please have a look at the new edits added showing the code from the view above. thanks. — Jordan Kinobe, Sep 07 '22 at 09:56

score 1 · Answer 1 · answered Sep 06 '22 at 17:31

1

The best solution I see is using formsets with HTMX. You can follow this excellent tutorial https://justdjango.com/blog/dynamic-forms-in-django-htmx

answered Sep 06 '22 at 17:31

mdc123

196
1
10

score 1 · Answer 2 · answered Sep 07 '22 at 10:32

1

I suppose you have, somewhere in your html, a form like this:

<form action="" method="post">
 <!-- Your table etc. here -->
</form>

In this case, try to modify your view in this way:

if request.method == 'POST':
    stocksArr = request.POST.getlist('stock')
    quantityArr = request.POST.getlist('quantity')
    priceArr = request.POST.getlist('price')
    totalArr = request.POST.getlist('total')

    print("---Array Data---")
    print(stocksArr)
    print(quantityArr)
    print(priceArr)
    print(totalArr)

Now, probably your form wasn't finding if 'Receipttotal' in request.POST:. Try this way and let me know if that solves your issue.

answered Sep 07 '22 at 10:32

Giorgio Scarso

386
1
2
11

Thanks a lot, actually that did the trick. However, instead of returning a full list of, say all the item data inserted by the user from the created rows, it only returns a list of the first entry inserted by the user. For example, if a user creates 2 dynamic rows and inserts data into both of them, the result it prints is for a single row i.e., the first row of data is the only one that's printed instead of a printing data from the 2 created rows. What could be a way around this issue. Thanks – Jordan Kinobe Sep 08 '22 at 07:35
Try removing, in the HTML, the [] in the name in the input. Like `name=“quantity”` instead of `name=“quantity[]”` – Giorgio Scarso Sep 08 '22 at 08:21
yes as suggested I tried to remove the [] in the name of the input but it still presented the same issue. I surely don't know how to go about this issue or is there an alternative way on achieving such functionality? – Jordan Kinobe Sep 09 '22 at 06:35

How to insert multiple rows of data from dynamically generated rows into a database using Python Django

2 Answers2