Как отправить информацию между двумя html с помощью json и POST?

В 'cart.html' у меня есть форма id="order-selection-cart", которая предназначена для выбора заказа пользователя, который он хочет оплатить.

<select id="order-selection-cart" onchange="order_cart()" class="form-control">
          {% for order in orders_for_user %}
              <option>{{order.id_zamowienie}}</option>
          {% endfor %}
</select>

На той же html странице я также отображаю выбранное значение заказа ({{order.id_zamowienie}} в форме id="order-selection-cart":

<div class="row cart-box" style="background-color:rgb(226, 226, 226);">
            <h10>Szczegóły zamówienia </h10>
            <h4 type="value" id="order-details"></h4>
</div>

Теперь я хочу перейти к 'checkout.html', нажав на кнопку с именем 'Zamawiam', и я сделал это следующим образом:

<div class="row cart-box" style="background-color:rgb(226, 226, 226);">
            <h4>Suma zamówienia</h4>
            <h10>Suma: {{cart_total|floatformat:2}} zł</h10>
            <br>
            <a class="btn btn-primary" href="{% url 'checkout' %}" role="button">Zamawiam</a>
</div>

Этот код работает, но у меня проблема с запоминанием выбранного заказа пользователя, который он хочет оплатить. Допустим, я выбрал опцию 2, я хочу запомнить ее и при нажатии на 'Zamawiam' перейти на 'checkout.html', где это значение (2) может быть доступно и не изменяться при повторном изменении (если пользователь изменит его в cart.html в другом окне, например). Сначала у меня был js код, который изменял значение выбранной опции в 'cart.html':

// ordernumber update in cart.html
function order_cart() {
    let user = '{{request.user}}'
    let select = document.getElementById('order-selection-cart');
    let select1 = document.getElementById('order-details');

    let value = select.options[select.selectedIndex].value;
    select1.innerHTML = value;
}

Затем я подумал о добавлении метода POST, но он будет выполняться каждый раз, когда пользователь меняет свой заказ в cart.html. Я хочу запускать POST-метод каждый раз, когда пользователь нажимает 'Zamawiam' с содержимым текущего варианта заказа, который был выбран пользователем. Я также хотел бы спросить, как затем получить доступ к 'order_number' в коде checkout.html.

// ordernumber update in cart.html
function order_cart() {
    let user = '{{request.user}}'
    let select = document.getElementById('order-selection-cart');
    let select1 = document.getElementById('order-details');

    let value = select.options[select.selectedIndex].value;
    select1.innerHTML = value;

    // send information about selected option to 
    alert('USER:', user)
    if(user === 'AnonymousUser'){
        console.log('Not logged in')

        // TODO: delete it once login is done 
        update_order_number(value);
    }else{
        update_order_number(value);
    }

}

function update_order_number(order_number){
    console.log('User is logged in, sending data...')

    let url = '/checkout/'

    // whenever we are sending POST data to the backend in Django, is we need to send CSRF token
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'order_number': product_id// body data type must match "Content-Type" header
        })
    })


    .then((response) => {
                return response.json()
            })

            .then((data) => {
                console.log('data: ', data)
            })
} 

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