如何在Django/AJAX中從窗體創建動態窗體集

Question

我正在處理包含兩種窗體的頁面。其中一種形式是常規的名稱，說明，註釋等。第二種是兩個下拉菜單 - Language和Level其中Level與Language使用AJAX鏈接。

我想讓這種形式出現在頁面上的次數與user想要的次數一樣多。因此，如果他們填寫Language和Level，則會在舊的下方顯示新的Language和Level表單。

問題是，如果表格是鏈接的，我必須分別標識每個Language和Level，所以我不能只複製form這個重複。 （也許我可以，但我無法弄清楚，因爲我是AJAX新手）。

這是一個create job Django的/ 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或其他東西包裝的，則只有一個最接近的關卡選擇用於語言選擇。

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

編輯：與樣品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; 
     } 
    }) 
});