Django заменяет текст в шаблоне

В моем проекте я могу фильтровать товары с помощью queryset.

Как изменить элемент h1 на название фильтра?

Я пытался изменить с помощью javascript, но когда я отфильтровал товары, страница перезагрузилась, а текст не изменился

models.py

TYPE = (
(0, "monitor"),
(1, "pc"),
(2, "phone"),
)

class Product(models.Model):
    name = models.CharField(max_length=200, unique=True)
    slug = models.SlugField(max_length=200, unique=True)
    image = models.ImageField(upload_to='images/')
    description = models.TextField()
    price = models.CharField(max_length=12, unique=True)
    type = models.IntegerField(choices=TYPE, default=0)
    


    def __str__(self):
        return self.name

views.py

class ProductList(generic.ListView):
    template_name = 'products.html'
    
    def get_queryset(self):
        queryset = Product.objects.all()
        
        type_query = self.request.GET.get("type", None)
        
        if type_query == 'monitor':
            queryset = Product.objects.filter(type=0)
        elif type_query == 'pc':
            queryset = Product.objects.filter(type=1)
        elif type_query == 'phone':
            queryset = Product.objects.filter(type=2)
        elif type_query == 'all':
            queryset = Product.objects.all()

        return queryset

products.html

<form onsubmit="return setTypeText()" id="type-form">
    
    <input type="radio" id="all-radio" name="type" value="all">
    
    <input type="radio" id="monitor-radio" name="type" value="monitor">
    
    <input type="radio" id="pc-radio" name="type" value="pc">

    <input type="radio" id="phone-radio" name="type" value="phone">
    
    <input type="submit" value="Filter">
</form>
<h1 id="type-text">All product</h1> #<---I need to change this

Мне нужно изменить h1 на входное значение

Javascript

function setTypeText(){            
    var elements = document.getElementsByName('type');
    
    var type_name;
          
    for(i = 0; i < elements.length; i++) {
        if(elements[i].checked)
        type_name =  elements[i].value;
    }

    document.getElementById("type-text").innerHTML = type_name;

    return true;
}

Когда я запускаю это, текст меняется на мгновение, но затем ссылка меняется и текст возвращается в положение по умолчанию.

Можно ли сделать переменную javascript, которая не меняется при изменении ссылки?

Любая помощь будет очень признательна и заранее благодарна.

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