How to refresh <div> in html and not the whole page

Question

I want to refresh particular section(which contains form) in html page and not the whole page in Django templates.form contains question and choices when user submit the form it redirect to next question.(base.html contains script which i used to create countdown timer)

question_details.html

{% extends 'app/base.html' %}
{% block content %}
<div>    
   <h2>score -{{user.userextend.score}}</h2>
   <form action="{% url 'app:detail' quiz_id=que.quiz.id question_id=que.id %}" method="post" id="user_form">
      {% csrf_token %}
      {% for choice in que.answer_set.all %}
          <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
          <label for="choice{{ forloop.counter }}">{{ choice.answer }}</label><br>

      {% endfor %}
      <input type="submit" value="Next">
   </form>
</div>
{% endblock %}

Answer 1

Django templates aren't designed to behave like an AJAX application or a SPA. They are made to follow the traditional request/response cycle, which includes full page reloads. It can be made to work but you'll need to use AJAX or some other JavaScript library.

Answer 2

Forms have a default reload function on submit. For example while using Forms in react. I can tell the component not to reload page when the submit button is clicked.

ex:

    onSubmit = { (e) => { 
        e.preventDefault(); 
        //call function here to update elements
        updateElement(data);
    }}

Which stops the default behavior of page reload when the submit button is clicked.