jquery - 带有添加新字段的按钮的表单

Question

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

假设有一种培训形式可以包含一些锻炼。锻炼次数未指定 (1+)。如何创建这样一个带有按钮添加新锻炼的表单？

编辑:

我的后端是用 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

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

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

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

<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>