使用JavaScript从DOM中删除表单 [英] Remove form from DOM using JavaScript

问题描述

我有三个单选按钮。.单击时，每个单选按钮都有一个独立的表单出现。单击单选按钮时，我需要从DOM中删除表单。 ，还有第三个尚未准备好。当我单击第一个单选按钮时，仅显示其形式，其他两个从DOM中删除。其他也一样。
我对JavaScript不太了解。

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 %}

推荐答案

<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);
});

在字段集中添加禁用的attr时，字段集内部输入字段数据将不会以表示字段的形式发布如果已禁用属性，则无法在fieldset标签中使用。因此，您可以在每种情况下显示特定形式，并在字段集标记中添加属性禁用，以防止内部字段数据发布。

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.

阅读 https://www.w3schools.com/tags/att_fieldset_disabled.asp

这篇关于使用JavaScript从DOM中删除表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！