Flask：如何添加按钮，当按下时可以动态地向表单中添加行

Question

我查看了很多资料都没有找到答案。

我有一个简单的表格，最初包含3个字符串输入字段，然后将该输入显示出来（以便我可以看到它）。

当用户单击按钮时，我想添加一个类似的行在现有行下面（即第四个字符串输入）。

是否有一种方法可以使用Python和Flask-wtforms实现这一点？

基本上，我想要像Google Maps输入框那样的东西，可以通过单击“+”按钮添加第三个、第四个、第五个等位置。

编辑：我意识到可以使用JavaScript完成此操作，但我真正的问题是如何从处理视图的Python文件中访问此数据。

- HLH

---

这更像是 JavaScript 的问题，而不是 Flask 的问题。您正在更新前端的 DOM。 - corvid

Answer 1

class RowForm(Form):
  name = StringField("Name") # or whatever fields represent a row
  age = IntegerField("Age")

class MyForm(Form):
  add = SubmitField("Add")
  rows = FieldList(FormField(RowForm))

@app.post("/")
def index_post():
  form = MyForm(request.form)

  if form.add.data: # Add button was clicked
    form.rows.append_entry("") # can also pass in a dict

  return render_template("my-form.html", form=form)

- Neil McGuigan

Answer 2

我最近在 Flask 之外使用了 jQuery 来实现这个功能。下面的代码将一个新的输入框添加到了一个 id 为 #example 的 div 元素的底部。

$("#addNewInput").click(function(){
  var newInput = $(document.createElement('input'))
   .attr("id", 'newInput');
  $("#example").append(newInput);
});

这个功能是通过给一个按钮设置id为#addNewInput来实现的，例如：

<button type="button" id="addNewInput">Add Input</button>

- juzten

---

我尝试过这样的方法，但是如何在我的Python文件中访问输入数据以执行处理数据的操作？目前，我的views.py文件初始化一个自定义表单对象并将其传递给HTML模板（使用render_template()）。当按下提交按钮时，我会检查Form对象的validate_on_submit()，然后使用表单数据。但由于添加新输入不会向Form()对象添加新属性，因此我无法访问该数据。 - HLH

应该能够检索像这样的值：request.args.get('age')。 - juzten