Django香脆形式 - 使用單選按鈕來隱藏/顯示其他字段

請問我有關於使用Django-crispy-form創建表單的問題。我想要一個有兩個字段的表格，第一個字段的選擇隱藏/顯示第二個字段。Django香脆形式 - 使用單選按鈕來隱藏/顯示其他字段

1st field：單選按鈕< =此選項隱藏/顯示第二個字段。
第二場：浮動場

我已經試過是：

給ID以單選按鈕，把第2場進一個div
運行一個JS功能，點擊時基於指定的ID的單選按鈕。
在JS函數中，獲取單選按鈕的值
根據該值，隱藏/顯示包含第二個字段的div。

但在第3步，我總是得到「未定義的值」。我想這是因爲我不能將id分配給選項/選項，而只是對整個單選按鈕沒有任何價值。但這只是我的猜測。請參閱我的簡單代碼，如果有人能幫助我，我將非常感激。

非常感謝！

forms.py

from crispy_forms.helper import FormHelper 
from crispy_forms.layout import Layout, Fieldset, ButtonHolder, Submit 
from crispy_forms.bootstrap import InlineRadios,PrependedAppendedText,Div 

class my_form(forms.Form): 
    # Radio button field 
    cargo = forms.ChoiceField(label='Cargo on Deck', 
           choices=[('true','Yes'), 
             ('false','No')], 
           initial='false') 
    # the 2nd field 
    L = forms.DecimalField(label='Length: L [m]') 

    ### Render form 
    def __init__(self, *args, **kwargs): 
     super(my_form, self).__init__(*args, **kwargs) 
     self.helper = FormHelper() 
     self.helper.form_id = 'my_form_id' 
     self.helper.form_class = 'blueForms' 
     self.helper.form_method = 'post' 
     self.helper.add_input(Submit('submit', 'Calculate')) 

     self.helper.form_class = 'form-horizontal' 
     self.helper.label_class = 'col-lg-4' 
     self.helper.field_class = 'col-lg-8' 

     # step 1: Assign id to radio, put 2nd field in a div 
     self.helper.layout = Layout(
      InlineRadios('cargo',id="radio_id"), 
      Div('L', css_id="div_id"), 
     )

HTML

<!-- Html --> 
 
{% extends 'home/home_base.html' %} 
 
{% block content %} 
 
    <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <!-- {% csrf_token %}--> 
 
      {% load crispy_forms_tags %} 
 
      {% crispy my_form my_form.helper %} 
 
     </div> 
 
    </div> 
 
    
 
    <!-- JS --> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    
 
    <script type="text/javascript"> 
 
     // step 2: run function when clicking radio button 
 
     $(document).ready(function() { 
 
     $('#radio_id').on('change',function(){ 
 
      // step 3: get selected value 
 
      var selected_value = $('input[id="radio_id"]:checked').val(); 
 
      alert(selected_value); // somehow this always gives "undefined value" 
 
    
 
      // step 4: hide/show dive based on selected_value 
 
      if($(this).val()=="true"){ 
 
       $("#div_id").hide() 
 
      } 
 
      else{ 
 
       $("#div_id").show() 
 
      } 
 
     }); 
 
     }); 
 
    </script> 
 
{% endblock %}

來源

2016-10-22 H.Tran

對於第3步在HTML文件中，請嘗試使用：

$('input[name="cargo"]:checked').val();

來源

2017-03-06 09:12:11 sundeep

Django香脆形式 - 使用單選按鈕來隱藏/顯示其他字段

回答

相關問題