How to pass pk value in the forms and correctly call view.py method , showing a confirmation modal in django

The problem is that i dont see any print or log messages in my views.py , which made me to a conclusion that that method is not method is not being called.

What i want to is to cancel subscription of a customer via button and show modal for confirmation.

View.py :

  @login_required
def cancel_subscription(request, pk):
    print("came to cancel sub")
    if request.method == 'POST':
        print("came to cancel sub")
        subscription = get_object_or_404(Subscription, pk=pk)
        subscription.status = 'expired'
        subscription.save()
        messages.success(request, 'Subscription cancelled successfully.')
        return redirect('customer_detail', pk=subscription.customer.pk)
    else:
        messages.error(request, 'Invalid request method.')
        return redirect('customer_list')

customer_detail.html

{% for subscription in subscriptions %}
  <button onclick="confirmCancelSubscription('{{ subscription.id }}')" class="flex items-center px-5 h-11 rounded-lg bg-error text-error-content hover:bg-error/90 transition-colors font-medium shadow-sm">
                            <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            <span>Cancel Subscription</span>
                        </button>
{% endfor %}
 <script>
                function confirmCancelSubscription(subscriptionId) {

            document.getElementById('cancelSubscriiptionModal').classList.remove('hidden');
            const form = document.getElementById('cancelSubscriiptionModal');
            form.action = "/cancel_subscription/" + subscriptionId + "/";
            console.log(subscriptionId);
            
            
        }
        
        function closeModal() {
            document.getElementById('cancelSubscriiptionModal').classList.add('hidden');
        }
                </script>

my form.html

<div id="cancelSubscriiptionModal" class="  hidden fixed inset-0 bg-black/50  items-center justify-center z-50">
    <div class="bg-base-100 rounded-lg shadow-xl border-2 border-base-300 w-full max-w-lg mx-4">
        <div class="px-6 py-4 border  flex  flex-col justify-between items-center">
        
        <form method="POST" class="flex flex-col gap-10"  >
            {% csrf_token %}
            <p class="text-black dark:text-white">Are you sure you want to cancel this subscription?</p>
            <div class="flex flex-row gap-20">
                <button type="button" onclick="closeModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 rounded-md transition-colors">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
                    Confirm
                </button>
            </div>    
        </form>
        </div>
    </div>
</div>

urls.py :

path('cancel_subscription/<int:pk>/', cancel_subscription, name='cancel_subscription'),
path('<int:pk>/view/', customer_detail, name='customer_detail'),

<form method="POST" id="cancelSubscriptionForm">
    {% csrf_token %}
    <p class="text-black dark:text-white">Are you sure you want to cancel this subscription?</p>
    <div class="flex flex-row gap-20">
        <button type="button" onclick="closeModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 rounded-md transition-colors">
            Cancel
        </button>
        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
            Confirm
        </button>
    </div>    
</form>

function confirmCancelSubscription(subscriptionId) {
    document.getElementById('cancelSubscriiptionModal').classList.remove('hidden');
    const form = document.getElementById('cancelSubscriptionForm'); // Get the form, not the div
    form.action = "/cancel_subscription/" + subscriptionId + "/"; // Set form action
    console.log("Subscription ID: ", subscriptionId);
}