Django replace text in template

In my project i can filter products with queryset.

How can i change a h1 element to the filter name?

I tried to change with javascript, but when i filtered the products the page reloaded and the text didn't change

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

I need to change the h1 to the input value

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;
}

When i run this the text changes for a moment, but then the link changes and the text goes back to default position.

Can I make a javascript variable that doesn't change when the link change?

Any help is much appreciated and thank you in advance.

Back to Top