Django Submitting two forms depending on each other with single submit button

I'm building a django app for managing orders. I have divided the orders management into two separated tables as follows:

Order: Fields include customer (Foreign Key), order_date, total_order_value and order_status.

OrderLine: Fields include item (Foreign Key), quantity, discount, total, order_id (Foreign Key).

I am trying to do the template for the order page such as below. enter image description here

<div class="row mb-2 mt-2" style="text-align: center;">
    <div class="col-2">
        <input type=button value="Back" class="btn btn-secondary" onClick="javascript:history.go(-1);">
    </div>
    <div class="col-9"></div>
</div>
<form method="POST" action="" enctype="multipart/form-data" id= "test">
    {% csrf_token %}
    <form id="order" action="" method="POST" enctype="multipart/form-data"></form>
    <form id="orderLine" action="" method="POST" enctype="multipart/form-data"></form>
    <div class="card">
        <div class="card-header" style="text-align: center;"><h1> Order Details </h1></div>
        <div class="card-body">
            <div class="card-text">
                <div class="row">
                    <div class="col-md-6">
                        <label for="id" class="form-label">Order ID</label>
                        <input type="text" class="form-control" id="id" value="{{order.id}}" readonly>
                    </div>
                    <div class="col-6">
                        <label for="order_date" class="form-label">Order Date</label>
                        {{orderForm.order_date}}
                    </div>
                    <div class="col-6">
                        <label for="customer" class="form-label">Customer Name</label>
                        {{orderForm.customer}}
                    </div>
                    <div class="col-6">
                        <label for="status" class="form-label">Order Status</label>
                        {{orderForm.status}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <br>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="card-text">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">Item</th>
                        <th scope="col">Unit Price</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Discount</th>
                        <th scope="col">Total</th>
                    </tr>
                    </thead>
                    {{ orderLineForm.management_form }}
                    <tbody>
                        {% for orderLine in orderLineForm %}
                            <tr class="orderline">
                                <th>{{orderLine.item}}</th>
                                <td>0</td>
                                <td>{{orderLine.qty}}</td>
                                <td class="omr" id="disc">{{orderLine.disc}}</td>
                                <td class="omr" id="total">{{orderLine.total_price}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-10"></div>
                    <div class="col-2" style="text-align: right;">
                        <label for="total" class="form-label">Total</label>
                        {{orderForm.total}}
                    </div>
                    <div class="col-12"> <br></div>
                    {% if status == 'new' %}
                        <div class="col-12" style="text-align: center;">
                            <input type="submit" name="update" class="btn btn-success" value="Add" form="test">
                        </div>
                    {% else %}
                        <div class="col-6">
                            <input type="submit" name="update" class="btn btn-success" value="Update" form="orderLine">
                        </div>
                        <div class="col-6">
                            <input type="submit" name="delete" class="btn btn-danger" value="Delete" form="orderLine">
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>            
    </div>
</form>

views.py

def newOrder(request):
    orderForm = OrderForm()
    orderLineForm = formset_factory(OrderLineForm)
    itemsList = list(Item.objects.values())
    if request.method == 'POST':
        orderForm = OrderForm(request.POST,prefix='0'),
        orderLineForm = OrderLineForm(request.POST,prefix='1')
        print(f'######\n form \n {request.POST}')
        print(f'######\n order form \n {orderForm}')
        print(f'######\n order line form \n {orderLineForm.data}')
        return redirect('orders')

    context = { 'orderForm':orderForm,
                'orderLineForm':orderLineForm,
                'status':'new',
                'itemsList':itemsList,
              }
    return render(request,'orders/orderDetail.html',context=context)

When submitting the form I only get the data from one form and not from both. Also, I have to add the order ID to the OrderLine form before saving to database.

I would appreciate the support.

Back to Top