javascript - Django：获取多步表单的先前值以动态显示下一步的字段

Question

我正在 Django 中制作一个项目，但我没有使用 Django 内置表单。相反，我使用 html 和 bootstrap 来呈现表单。在一个页面上，我想创建一个测验。我通过一个多步骤表格来完成此操作，我在第一个表格上输入问题的数量。然后基于这个字段，当我点击下一步时，我希望出现相同数量的问题和相应答案的字段，以便我可以设置它们。例如，如果我输入 5 个问题并点击下一步，它应该有 5 个字段供我输入问题，每个问题字段应该有 4 个答案字段。有没有办法动态地做到这一点？

请帮助:((((这很重要。

谢谢n这是我的代码片段

{% block content %}

 <div class="row">
    <h2 style="color: darkblue;" class="text-center">Add a Quiz</h2>
 </div>

<form action="" id="add_test_form" method="POST">
    <!--This form will contain the quiz information-->
    {% csrf_token %}
    <div class="row">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Name of test</label>
                <input type="text" class="form-control" name="test_name" required>
            </div>
        </div>
    </div>


    
    <div class="row">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Number of questions</label>
                <input type="number" id="num_qu" class="form-control" name="test_num_questions" min="1" 
              oninput="validity.valid||(value='')" required>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Time( Duration) in minutes</label>
                <input type="number" class="form-control" name="test_duration" min="1" 
          oninput="validity.valid||(value='')" required>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="form-row">
            <div class="form-group col-md-4">
                <input type="button" value="Next" id="first_next" class="btn btn-primary btn-lg mb-10">
            </div>
        </div>
    </div>
</form>


</div>    

<script>

 $(document).ready(function(){
 $("#first_next").click(function(e){
   var num_of_qu = $("#num_qu").val();
   alert(num_of_qu);
  });
});

</script>

{% endblock content %}

标签： javascriptpythonhtmljquerydjango