plateforme-tfjm2/apps/registration/templates/registration/add_organizer.html

<!-- templates/signup.html -->
{% extends 'base.html' %}
{% load crispy_forms_filters %}
{% load i18n %}
{% block title %}{% trans "Add organizer" %}{% endblock %}

{% block extracss %}
    {{ volunteer_registration_form.media }}
{% endblock %}

{% block content %}
    <h2>{% trans "Add organizer" %}</h2>

    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <div id="registration_form"></div>
        <button class="btn btn-success" type="submit">
            {% trans "Add organizer" %}
        </button>
    </form>

    <div id="volunteer_registration_form" class="d-none">
        {{ volunteer_registration_form|crispy }}
    </div>
    <div id="admin_registration_form" class="d-none">
        {{ admin_registration_form|crispy }}
    </div>
{% endblock %}

{% block extrajavascript %}
    <script>
    $("#id_type").change(function() {
        let selected_role = $("#id_type :selected");
        if (selected_role.val() === "volunteer") {
            $("#registration_form").html($("#volunteer_registration_form").html());
        }
        else {
            $("#registration_form").html($("#admin_registration_form").html());
        }
    }).change();
    </script>
{% endblock %}