Question

我想知道用Django创建动态表单的最佳方法是什么。

假设有一个可以包含一些锻炼的训练表格。锻炼数量未指定（1+）。如何使用按钮添加新的Workout来创建这样的表单？

编辑：

我的后端是用Django / Python编写的。到目前为止，我的模型如下所示：

class WorkoutForm(forms.Form):
    name = forms.CharField(max_length = 45)
    description = forms.CharField(widget = forms.Textarea)

class TrainingForm(forms.Form):
    name = forms.CharField(max_length = 45)
    all_workouts = Workout.objects.all()
    description = forms.CharField(widget = forms.Textarea)
    selected_workouts = forms.MultipleChoiceField(required=False,
        widget=forms.SelectMultiple, choices=[(o.id, o.name) for o in all_workouts])

但我希望在点击“添加”按钮后添加新的“锻炼”字段时将其更改为动态表单。

Answer 1

这样的事情对你有帮助吗？

＆＃13;

$(function () {
  $("#add").click(function (e) {
    e.preventDefault();      // Make sure nothing happens.
    $(".master")
      .clone()                // Clone this
      .removeClass("master")  // Remove the master class
      .find("input").attr("name", "workout[]").end() // Change the input name
      .appendTo("form");      // Append it to the form.
  });
});

＆＃13;

label {display: block;}
.master {display: none;}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<form action="">
  <label class="master">
    <strong></strong>
    <input type="text" />
  </label>
  <a href="#" id="add">Add New</a>
  <label>
    <strong></strong>
    <input type="text" name="workout[]" />
  </label>
</form>

＆＃13;

Answer 2

我认为这样的事情也会起作用，取决于你的需要。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="workouts">
    <div class="workout" id="workout1">
      <label>Workout:</label>
      <input type="text">
    </div>
  </div>

  <button id="addWorkout" type="button">Add</button>
</form>
<script>
  $("#addWorkout").on("click", function(e) {
    e.preventDefault();
    var last = $("#workouts").last().attr("id")
    template = "<div class='workout' id='workout" + parseInt(last[-1])+1 + "'><label>Workout:</label> <input type='text'>"
    $("#workouts").append(template);
  });
</script>

使用按钮添加新字段的表单

2 个答案: