title: Django/Js: how to post a form without reloading whole page
body: <p>My application currently flows through 3 pages:</p>
  <ol>
  <li>User selects question in index page</li>
  <li>User submits answer in answer page</li>
  <li>User is presented with result in results page.</li>
  </ol>
  <p>I want to compress that down to a single page where the user submits an answer to the question and result is shown on the same page.</p>
  <p>The following <code>django-template</code> code separates questions with Bootstrap accordion. How do I post the form without refreshing the whole page? I want to be able to display the result on the page, update CSS styling with Javascript etc.</p>
  <pre><code>&lt;h2&gt;{{ category.title }}&lt;/h2&gt;
      &lt;div class=&quot;accordion&quot; id=&quot;accordion{{category.title}}&quot;&gt;
  
        {% for challenge in category.challenge_set.all %} 
        &lt;div class=&quot;card&quot;&gt;
          &lt;div class=&quot;card-header&quot; id=&quot;heading{{challenge.id}}&quot;&gt;
            &lt;h2 class=&quot;mb-0&quot;&gt;
              &lt;button class=&quot;btn btn-link btn-block text-left&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#collapse{{challenge.id}}&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapse{{challenge.id}}&quot;&gt;
                {{ challenge.question_text }} - {{ challenge.point_value }} points
              &lt;/button&gt;
            &lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id=&quot;collapse{{challenge.id}}&quot; class=&quot;collapse in&quot; aria-labelledby=&quot;heading{{challenge.id}}&quot; data-parent=&quot;#accordion{{category.title}}&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              
              &lt;p&gt;{{ challenge.description }}&lt;/p&gt;
            
              &lt;form action=&quot;{% url 'challenges:answer' challenge.id %}&quot; method=&quot;post&quot;&gt;
              
                {% if challenge|is_answered:request %}
                  &lt;label for=&quot;answered&quot;&gt;Answer&lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;answered&quot; id=&quot;answered&quot; value=&quot;{{ challenge.answer_text }}&quot; readonly&gt;
                {% else %}
                {% csrf_token %}
                  &lt;label for=&quot;answer&quot;&gt;Answer&lt;/label&gt;
                  &lt;input type=&quot;text&quot; name=&quot;answer&quot; id=&quot;answer&quot;&gt;
                  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
                {% endif %}
              &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
  
      &lt;/div&gt;
  </code></pre>
  <p>Here is the view:</p>
  <pre><code>def index(request):
      context = {'challenges_by_category_list': Category.objects.all()}
      return render(request, 'challenges/index.html', context)
  
  def detail(request, challenge_id):
      challenge = get_object_or_404(Challenge, pk=challenge_id)
      return render(request, 'challenges/detail.html', {'challenge': challenge})
  
  def results(request, challenge_id, result):
      challenge = get_object_or_404(Challenge, pk=challenge_id)
      return render(request, 'challenges/results.html', {'challenge':challenge, 'result':result})
  
  def answer(request, challenge_id):
      challenge = get_object_or_404(Challenge, pk=challenge_id)
      result = &quot;Incorrect, try again!&quot;
      if challenge.answer_text.lower() == request.POST['answer'].lower():
        current_user = request.user
        session = User_Challenge(user=current_user, challenge=challenge, answered=True)
        session.save()
        points = Profile(user=current_user, points=challenge.point_value)
        points.save()
        result = &quot;Correct!&quot;
      return HttpResponseRedirect(reverse('challenges:results', args=(challenge.id, result)))
  </code></pre>