如何创建动态表单？

Question

我正在尝试使用 Flask 构建交互式表单。具体来说，它是一种供教师进行测验的表格。每个问题都有多个答案。一切都需要动态完成，因为每个问题可能有不同数量的答案，每个测验可能有不同数量的问题。

当用户点击一个按钮时，一个新的输入字段会被添加到 Javascript 中。每个字段都是一个新的<input type="text" required>。这是 HTML 的示例。 <div 和 id="quiz" 中的所有内容都是使用 javascript 和一些按钮动态生成的。

<form method="post">
    <div class="form-group">
        <label for="course">Select the course</label>
        <select class="form-control" name="course" id="course" required="">

            <option value="1">Course 1</option>

            <option value="2">Course 2 </option>

        </select>

        <div class="quiz" id="quiz">

            <div class="question">
                <input type="text" id="1" required>
                <div class="answer">
                    <input type="text" id="4" required>
                    <label>Correct?</label>
                    <input type="checkbox">
                </div>
                <div class="answer">
                    <input type="text" id="6" required>
                    <label>Correct?</label>
                    <input type="checkbox">
                </div>
                <div class="answer">
                    <input type="text" id="8" required>
                    <label>Correct?</label>
                    <input type="checkbox">
               </div>
            </div>

        </div>

    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

预期行为

使用 Flask，我应该能够做这样的事情并获取所有已添加的字段

@dashboard.route('/newQuiz', methods=['POST', 'GET'])
def newQuiz():
    if request.method == 'POST':
        print(request.form) #immutableMultiDict with all the data

会发生什么 request.form 仅返回 course 选择。 course 是唯一在 Python 中生成的东西。 POST 请求中不存在使用 JS 添加的所有其他输入。

如何将此动态内容添加到POST 请求中？

Answer 1

在这里回答我自己的问题，因为我发现我正在寻找的行为在 Flask 中“不是一件事”。我必须使用 Javascript 手动获取表单中的所有内容，向服务器发出 AJAX 请求并刷新页面。

fetch(`${window.location}`, {
        method: "POST",
        body: JSON.stringify(quiz), //this should be your object
        cache: "no-cache",
        headers: new Headers({
            "content-type": "application/json"
        })
    }) //getting the response back
        .then(function (response) {
            if (response.status !== 200) {
                console.log(`Response status was ${response.status}`)
                return;
            }

            response.json().then(function (data) {
                console.log(data);
                location.reload(); // this is needed if you want to flash messages!
            })
        })

然后，用 python

@yourBlueprint.route('/', methods=['GET','POST'])
def something():
    if request.method == 'POST':
        quiz = request.get_json() # this is now a dictionary, do whatever you want with it!
        flash("Okie dokie, i've received your stuff") 
        return make_response(jsonify({'message': 'hello from the other side'}), 200)

希望这对将来的某人有所帮助！

编辑 我错了。上面的方法有效，但对我来说这是一个很大的麻烦。 input 标签需要 name 属性才能在 ImmutableMultiDict 对象中访问。综上所述，初始帖子中的代码有效，但您需要在每个input 标签中添加一个name 属性。

<div class="answer">
  <input type="text" id="4" name="text1" required>
  <label>Correct?</label>
  <input type="checkbox" name="checkbox1">
</div>