{% load bootstrap3 %}
<form action="{% url "notes:update-sujet" form.instance.pk %}" method="post">{% csrf_token %}
<table class="table table-striped">
  {% with "-" as none %}
  <tr><th>Nom</th><th>Surnom</th><th>Prénom</th></tr>
  <tr><td>{% bootstrap_field form.nom show_label=False %}</td><td>{% bootstrap_field form.surnom show_label=False %}</td><td>{% bootstrap_field form.prenom show_label=False %}</td></tr>
  <tr><th>Âge</th><th>Genre</th><th>Première rencontre</th></tr>
  <tr><td>{% bootstrap_field form.age show_label=False %}</td><td>{% bootstrap_field form.genre show_label=False %}</td><td>{% bootstrap_field form.premiere_rencontre show_label=False %}</td></tr>
  {% endwith %}
</table>
<div class="panel-footer text-right">
  <span class="text-right">{% bootstrap_button "Enregistrer" button_type="submit" %}
  <span class="btn btn-primary btn-sm" id="cancel">Annuler</span></span>
</div>
</form>

<script type="text/javascript">
  $(function() {
    $("#cancel").click(function() {
      console.log("cancelled !")
      $("#sujet-content").load("{% url "notes:sujet" form.instance.pk %}");
    });
  });
</script>