Как создать динамический набор форм из формы в Django/AJAX

Question

Я работаю над страницей, которая содержит две формы. Одна из этих форм является регулярной: имя, описание, примечания и т. Д. Второй - это два раскрывающихся меню - Language и Level, где Level прикован к Language с использованием AJAX.

Я хочу, чтобы эта форма появилась на странице столько раз, как user. Так что ifthey заполнить 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 или что-то еще, для выбора языка выбирается только один ближайший уровень.

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