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.

Answer 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

Answer 2

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.