django - Remove form from DOM using JavaScript

Question

I have three radio buttons.. each radio buttons on click have an independent form that appears. I need to remove form from DOM when i click on a radio button. and there are a third one not ready yet. When i click on the first radio button only its form appears, the other two are removed from DOM. Same for other. I don't have a good idea about JavaScript.

Html:

   <div class="page-header">
    <h1>Backtesting{% if form.instance.pk %}: {{form.instance.title}} {% endif %}</h1>
    </div> 

   <div class="row">
    <div class='col-md-9'>
               <form action="{% url "backtest" %}" method='POST' role='form' id='form'>
                  {% csrf_token %}

                <div id="tabs">


                 <input type="radio" name="tabs" value="first" id="toggle-tab1"  checked="checked" />
                 <label for="toggle-tab1">Long</label>

                 <input type="radio" name="tabs" value="second" id="toggle-tab2"     />
                 <label for="toggle-tab2">Short</label>

                 <input type="radio" name="tabs" value="third" id="toggle-tab3"   />
                 <label for="toggle-tab3">Long and Short</label>
                 <div id="tab1" class="tab"  >



                     {% include 'tags/parameters_form.html' %}
                         <br />


                            {% if user.is_authenticated %}
                            <input type='submit' id='run' value='Run' class='btn btn-default'>

                            {% if user.profile.is_active %}
                    Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'>
                {% else %}
                    <p>
                    Expired account! you need to reactivate in order to save parameters.
                    </p>
                {% endif %}
            {% else %}
                                     Please <a href="{% url 'auth_login' %}">login</a> in order to Run backtesting!
                 </br>
                 Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs).   

                              {% endif %}                        




                 </div>
                 <div id="tab2" class="tab"  >

                   {% include 'tags/parameters_backtest_form.html' %}
                            <br />


                            {% if user.is_authenticated %}
                            <input type='submit' id='run' value='Run' class='btn btn-default'>

                {% if user.profile.is_active %}
                    Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'>
                {% else %}
                    <p>
                    Expired account! you need to reactivate in order to save parameters.
                    </p>
                {% endif %}
            {% else %}
                                     Please <a href="{% url 'auth_login' %}">login</a> in order to Run backtesting!
                 </br>
                 Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs).   

                              {% endif %}






                 </div> 
                    </div> 
           </form>

         </div> 

     </div>
{% endblock %}

Answer 1

<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
                  {% csrf_token %}

                <div id="tabs">


                 <input type="radio" name="tabs" value="first" id="toggle-tab1"  checked="checked" />
                 <label for="toggle-tab1">Long</label>

                 <input type="radio" name="tabs" value="second" id="toggle-tab2"     />
                 <label for="toggle-tab2">Short</label>

                 <input type="radio" name="tabs" value="third" id="toggle-tab3"   />
                 <label for="toggle-tab3">Long and Short</label>
                 <div id="tab1" class="tab"  >

                    <!-- first form will show when page load -->
                     <fieldset id="first" class="toggle">
                     {% include 'tags/parameters_form.html' %}
                     </fieldset>
                    <fieldset disabled id="second" class="toggle">
                          {% include 'tags/parameters_form.html' %}
                     </fieldset>
                     <fieldset disabled id="third" class="toggle">
                         {% include 'tags/parameters_form.html' %}
                     </fieldset>
      .....

Js

$('[name="tabs"]').click(function(){
  $('.toggle').prop("disabled", true);
  var val = $(this).val()
  $('#'+val).prop('disabled', false);
});

When you add disabled attr in fieldset then fieldset inner input field data will not post in form that means field will not work in fieldset tag if it have disabled attribute. So you can show specific form in each condition and add attribute disable in fieldset tag that inner field data will not post.

Read about https://www.w3schools.com/tags/att_fieldset_disabled.asp