Django/AJAXでフォームから動的フォームセットを作成するには

Question

私は2つのフォームを含むページで作業しています。 2つ目のドロップダウンメニューはLanguageとLevelです。ここでLevelはLanguageとAJAXを使用してチェーンされています。このフォームの1つは通常の名前、説明、メモなどです。

このフォームは、userが何度もページに表示されるようにしたいと考えています。したがって、LanguageとLevelと入力すると、古いものの下に新しいLanguageとLevelのフォームが表示されます。

フォームがチェーン化されている場合は、LanguageとLevelを別々に識別する必要があるため、formを繰り返してコピーすることはできません。 （たぶん私はできるが、私はAJAXで新しくなってから理解できないかもしれない）。

これはcreate jobジャンゴ/ htmlです：

{% extends 'base.html' %} 
{% load crispy_forms_tags %} 
{% load static %} 
{% block head %} 
    <script src="{% static "js/main.js" %}"></script> 
{% endblock %} 
{% block content %} 
    {% if user.is_authenticated %} 
     <form action="" method="post" enctype="multipart/form-data">{% csrf_token %} 
      {{ language_form }} 
      <button value="Update" type="submit">Submit</button> 
     </form> 
    {% endif %} 
{% endblock %} 

これはjQueryのです：

$(document).on('change','#id_language',function(){ 
    language_id = $(this).val(); 
    request_url = '/get-highest-level/'+language_id+'/'; 
    $.ajax({ 
     url:request_url, 
     success: function(data){ 
      var select = $('#id_level'); 
      select.empty(); 
      $.each(data, function (key,value) { 
       $('select[name="level"]').append('<option value="'+ key + '">'+value + '</option>'); 
      }); 
      return false; 
     } 
    }) 
}); 

とシンプルビュー：

@login_required 
def create_order(request): 
    language_form = LanguageLevelForm(request.POST or None) 
    return render(request,'auth/jobs/create-job-test.html',context={'language_form':language_form}) 

私はそれが可能でなければならないことを知っていますFormSetを使用するにはどうすればよいのですか？JQuery。

Answer 1

選択オプションを更新するには、それらを識別する必要はありません。 言語フォームがdivなどでラップされている場合、言語選択に最も近いレベル選択は1つだけです。

$(document).on('change','select.language',function(){ // use class, not id 
    language_id = $(this).val(); 
    request_url = '/get-highest-level/'+language_id+'/'; 
    var language = $(this); 
    $.ajax({ 
     url:request_url, 
     success: function(data){ 
      //find closest select with class "level" 
      var select = language.closest('select.level'); 
      select.empty(); 
      $.each(data, function (key,value) { 
       // use select found above. 
       select.append('<option value="'+ key + '">'+value + '</option>'); 
      }); 
      return false; 
     } 
    }) 
}); 

同様に、識別することなく属性を変更することができます。

$('select.language').each(function(index){ 
    $(this).attr('name', 'language' + index); 
}); 

EDIT：あなたのサンプルHTMLで、これを試してみてください。..

$(document).on('change','select[id$="language"]',function(){ // id ends with 'language' 
    language_id = $(this).val(); 
    request_url = '/get-highest-level/'+language_id+'/'; 
    var level_select_id = $(this).attr('id').replace('language', 'level'); // tricky.. 
    $.ajax({ 
     url:request_url, 
     success: function(data){ 
      var select = $('#' + level_select_id); // use id string found above 
      select.empty(); 
      $.each(data, function (key,value) { 
       select.append('<option value="'+ key + '">'+value + '</option>'); 
      }); 
      return false; 
     } 
    }) 
});