如何从 Django/AJAX 中的表单创建动态表单集

Question

我正在处理一个包含两个表单的页面。其中一种形式是常规形式 - 名称、描述、注释等。第二种形式是两个下拉菜单 - Language 和 Level，其中 Level 使用 AJAX 与 Language 链接。

我想让这个表单出现在页面上的次数与user 一样。因此，如果他们填写Language 和Level，则会在旧表单下方出现新的Language 和Level。

问题是，如果表单被链接，我必须分别识别每个Language 和Level，所以我不能只是重复复制form。 （也许我可以，但我不知道，因为我是 AJAX 的新手）。

这是create jobdjango/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;
         }
     })
});