Django- Getting data from form to model

I am facing difficulty getting the selected size from the HTML template to my OrderItem model.
I have the size model separately defined and added in as a foreign key on the OrderItem model.

In the HTML template, I am looping through the available size that I have in my Size model among which one is to be selected but I am not getting that selected size added to ORderItem

This is the model that I have

class Size(models.Model):
    name = models.CharField(max_length=255, primary_key=True)
    def __str__(self):
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)

And these are the views of that update orderItem and render sizes

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
        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)

    if orderItem.quantity <= 0:

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

This is the HTML template

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

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

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

And this is the JS to update item on clicking

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')
            updateUserOrder(productId, action, size)

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

        var url = '/update_item/'

        fetch(url, {
            body:JSON.stringify({'productId':productId, 'action':action, 'size':size})
        .then((response) => {
           return response.json();
        .then((data) => {
            console.log('Data:', data)
Back to Top