Django- Получение данных из формы в модель

Я сталкиваюсь с проблемой получения выбранного размера из HTML-шаблона в модель OrderItem.
У меня модель размера определена отдельно и добавлена как внешний ключ в модель OrderItem.

В шаблоне HTML я перебираю доступные размеры, имеющиеся в моей модели Size, среди которых должен быть выбран один, но я не получаю выбранный размер, добавленный в ORderItem

Это модель, которая у меня есть

class Size(models.Model):
    name = models.CharField(max_length=255, primary_key=True)
    
    def __str__(self):
        return self.name

class OrderItem(models.Model):
    product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
    order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
    size = models.ForeignKey(Size, on_delete=models.SET_NULL, blank=True, null=True)
    quantity = models.IntegerField(default=0, null=True, blank=True)
    date_added = models.DateTimeField(auto_now_add=True)

А это представления того обновления orderItem и рендеринга размеров

def store(request):
    sizes = Size.objects.all()
    c1 = ProductCollection.objects.get(name='c1')
    products = c1.products.all()
    if request.method == "POST":
        size = request.POST.get('size')

    if request.user.is_authenticated:
        customer = request.user.customer
        order, created = Order.objects.get_or_create(customer=customer, complete=False)
        items = order.orderitem_set.all()
        cartItems = order.get_cart_items
    else:
        items = []   
        order = {'get_cart_total':0, 'get_cart_items':0} 
        cartItems = order['get_cart_items']

   
    
    context = {
        'c1': c1,
        'products': products,
        'cartItems': cartItems,
        'sizes': sizes,
        
    }
    return render(request, 'store.html', context)

def updateItem(request):
    data = json.loads(request.body)
    productId = data['productId']
    action = data['action']

    print('Action:', action)
    print('Product:', productId)
    size = request.POST.get('size')
    

    customer = request.user.customer
    product = Product.objects.get(id=productId)
    order, created = Order.objects.get_or_create(customer=customer, complete=False)

    orderItem, created = OrderItem.objects.get_or_create(order=order, product=product, size=size)

    if action == 'add':
        orderItem.quantity = (orderItem.quantity + 1)
    elif action == 'remove':
        orderItem.quantity = (orderItem.quantity - 1)

    orderItem.save()

    if orderItem.quantity <= 0:
        orderItem.delete()

    return JsonResponse('Item was added', safe=False)

Это HTML шаблон

<div class="row" >
        {% for product in products %}
        <div class="col-lg-4">
            <img class="thumbnail" src="{{product.imageURL}}">
            <div class="box-element product">
                <h6><strong>{{product.name}}</strong></h6>
                <hr>

               <form name="sizeForm" id="id_sizeForm" action="" method="post">
                {% csrf_token %}
                <select id="id_size">
                    {% for size in sizes %}
                      <option value="{{ size.name }}">{{ size.name }}</option>
                    {% endfor %}
                  </select>
                  <input type="submit" value="Add to Cart" data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-cart">
               </form>

                
                
                <a class="btn btn-outline-success" href="#">View</a>
                <h4 style="display: inline-block; float: right"><strong>${{product.price}}</strong></h4>
                
            </div>
        </div>
        {% endfor %}
    </div>  

А это JS для обновления элемента при нажатии

var updateBtns = document.getElementsByClassName('update-cart')
var size = document.getElementById('id_size').value;

for (i = 0; i < updateBtns.length; i++) {
    updateBtns[i].addEventListener('click', function(){
        var productId = this.dataset.product
        var action = this.dataset.action
        console.log('productId:', productId, 'Action:', action, 'Size:', size)
        console.log('USER:', user)

        if (user == 'AnonymousUser'){
            console.log('User is not authenticated')
        }else{
            updateUserOrder(productId, action, size)
        }
    })
}

function updateUserOrder(productId, action, size){
    console.log('User is authenticated, sending data...')

        var url = '/update_item/'

        fetch(url, {
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
            }, 
            body:JSON.stringify({'productId':productId, 'action':action, 'size':size})
        })
        .then((response) => {
           return response.json();
        })
        .then((data) => {
            console.log('Data:', data)
        });
}

Вернуться на верх