在Django中使用JavaScript动态渲染表单

Using JavaScript to render forms dynamically in Django

本文关键字：动态 表单 JavaScript Django      更新时间：2023-09-26

我是Django的新手，也是JavaScript的新手。我试图创建一个视图，动态呈现多个表单使用JavaScript。下面是我创建的两个表单。

class CreateTestForm(forms.ModelForm):
class Meta:
    model = Test
    fields = ['name', 'test_group', 'description', 'query_text', 'failure_condition', 'status']
def getKey(self):
    return "create_test_form"
class VC1Form(CreateTestForm):
expected_relation = forms.ChoiceField(choices = [('<','<'), ('>','>'), ('=','='), ('<=','<='), ('>=','>='), ('!=','!=')], required = True, label = 'Expected Relation: ')
num_rows = forms.IntegerField()
def getKey(self):
    return "vc1_form"

另外，我有以下视图

def create_test(request):
context = {
    'all_validation_classes': ValidationClass.objects.all()
}
for form in [CreateTestForm, VC1Form]:
    if request.method == 'POST':
        f=form(request.POST)
        if (f.is_valid()):
            return HttpResponseRedirect('/test_created/')
        else:
            return HttpResponseRedirect('/test_not_created/')
    else:
        f = form()
    context[f.getKey()] = f
return render(request, 'create_test.html', context)

和模板:

<form action="/tests/create/" method="post">
{% csrf_token %}
{{create_test_form.as_ul}} <br><br>
<select id="validation_classes_id" name="all_validation_classes" onchange="showForm()">
    <option value="%">Choose the validation class</option>
    {% for val_class in all_validation_classes %}
     <option value="{{ val_class.id }}">{{ val_class.id}}  {{val_class.name }}</option>
    {% endfor %}
</select>
<br><br>

<script>
    function showForm(){
        var x = document.getElementById("validation_class_id").value;
    }
</script>
<input type="submit" value="Submit" />

我试图到达一个点，在那里，当用户从下拉菜单(validation_classes_id)中选择一些东西时，视图将呈现与该选择相对应的表单。我目前只包括一个额外的形式VC1Form在这里，但我已经写了不同的形式对应于下拉菜单中的每个选项。我已经尝试了一些事情，但没有工作，任何帮助将不胜感激!

试试这样做: document.getElementById('form').querySelectorAll("label").forEach( e => {e.prepend(document.createElement("br"));}); 更好的是:

<form id="form" action="login_view" method="post">
    {% csrf_token %}
    <table>
    {{ form }}
  </table>
    <input type="submit" value="register">
相关文章：