Django ChoiceField RadioSelect widget in form, test whitch element selected in template

Question

I have 2 radio buttons in a ChoiceField and I would like to display some parts of the template, depending of witch radio button is selected.

Following :

• form.py

 class CtdForm(forms.Form):
    protocol_name = forms.CharField(max_length=100)
    rb = forms.BooleanField(required=False, label='RB')
    mr = forms.BooleanField(required=False, label='MR')
    CHOICES = [('rb' ,'RB'), ('mr', 'MR')]
    analyse_type = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect)

• template html

...  
{{ form.analyse_type }}  
Here I would like to test which button is selected and display the template depending of the selection 
something like : {% if form.analyse_type.? == true %} 
...

I test a lot of syntaxe with form.analyse_type.? like form.analyse_type.field.widget.choices to have each choices in a loop ect. , but I do not found the right one returning the selected radiobutton...

Maybe this way is not the right one to do what I want.

If you have any idea, solution thank you ;)

Edit for user2497126 Thanks for all tips :) !

I have an error Uncaught Error: GET_ELEMENTS: -> form[data-sb-form-api-token] seems to be in link with the object analyse_type

As requested, following a print screen with the html element.I tired different synthaxe like

let radioValue =$("input[name='analyse_type']:checked").value();

I also put my HTML code in case

{% extends "index.html" %}

{% load static %}
{% block content %}
<div style="padding-left: 30%;" class="col-lg-6 col-xl-6"
    <h2 class="h4 fw-bolder">
        Analyse Type
    </h2>
    <br>
        {{ form.analyse_type }}
    <br> </div> 
    <div id="template-one" style="display:none;">
       <div style="padding-right: 30%;" class="col-lg-6 col-xl-6">
        <h2 class="h4 fw-bolder">
            TEST
        </h2> 
     </div>  
  </div> 
 {% endblock %}

{% block javascript %}  
  <script type="text/javascript">
        $(document).ready(function () {
            $(".custom-control-input").change(function () {
                let radioValue = $("input[name='analyse_type']:checked").value();
                let templateOne = document.getElementById('template-one')
                if (radioValue == "rb") {
                    $("#template-one").show();
                } else {
                    $("#template-one").hide();
                }
            });
        });

    </script>


{% endblock javascript %}

EDIT

if I do a

console.log($("input[name='analyse_type']:checked").val())

in the debugger of chrome I have a return of rb. But the error is still there with no result. I also change the html, include the template-one in the same div of the form like your example The problem seems here

$(".custom-control-input").change(function () {

I replace .custom by select or select#id_analyse_type, based on some forum answers, but I have no result

Thanks for your time and your help :)

EDIT

Here the solution :

{% block javascript %}
    <script type="text/javascript">
        $(document).ready(function () {
            let radioValue = $("input[name='analyse_type']:checked").val();
                if (radioValue == "rb") {
                    $("#template-one").show();
                } else {
                    $("#template-one").hide();
                }
            $('#id_analyse_type').change(function () {
                let radioValue = $("input[name='analyse_type']:checked").val();
                if (radioValue == "rb") {
                    $("#template-one").show();
                } else {
                    $("#template-one").hide();
                }
            });
        });

    </script>
{% endblock javascript %}

Thank you for your help !

Answer 1

Here is an edited answer which I have tried to adapt to your question

For the change function (i.e when selecting the radio) inspect and replace the class value with the one in your radio input. Also ensure you supply the correct name when instantiating the variable radioValue, I have used 'analyze_type' for the sake of the example but inspect and confirm the correct name value of the radio input.

You can achieve it using JS like this in your template

{% extends "base.html" %}

{% block title %}Form title{% endblock title %}


{% block content %}

<!-- page content -->

                    <div class="x_content">
                        {{ form.analyse_type}}
                        <div id="template-one" style="display:none;">
                            Template one
                        </div>
                        <div id="template-two" style="display:none;">
                            Template two
                        </div>

                    </div>
<!-- /page content -->
{% endblock %}

{% block javascript %}
    <script>
        $(document).ready(function(){
            $(".custom-control-input").change(function(){
                let radioValue = $("input[name='analyse_type']:checked").val();
                let templateOne = document.getElementById('template-one')
                if(radioValue == "RB"){
                    $("#template-one").show();
                    $("#template-two").hide();
                }
                else {
                    $("#template-two").show();
                    $("#template-one").hide();
                }
            });     
        });
        
    </script>
{% endblock javascript %}