0

我需要你的帮助。

问题：我想创建一个接受一些输入的单页网页。说它是一个简单的信用计算器。第一种形式（货币）应该提供唯一的数据，另一对（日期和总和）应该是可乘的，而无需事先知道用户将输入多少条目。

到目前为止，我正在尝试处理问题的两个方面。

  1. 如何制作正确的动态表单，以我想要的方式生成输入表单框？简短的例子（很抱歉对第二个进行了绘画编辑）：

它看起来如何

它应该是怎样的

基本上，我想要一个 JS 脚本 a) 立即克隆两个表单，而不是在“提交”按钮之后（据说它们下面会有更多字段，所以我希望新字段“就地”出现，而不是最后出现页面），b）通过输入字段将按钮居中，c）删除克隆表单的名称。

我目前写的代码如下：

{% extends 'bootstrap/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block title %}
    {% if title %}{{ title }} Calculator{% else %}Calculator{% endif %}
{% endblock %}

{% block content %}
<div class="form-wrapper">
    <form method="POST" action="/fixed">
        {{ form.csrf_token }}
        <div class="row">
            <h1> TEST </h1>
        </div>
        <div class="row">
            <div class="form-group col-md-4">{{ wtf.form_field(form.currency) }}</div>
        </div>
        <div id="InputsWrapper">
            <div class="row">
                <div class="form-group col-md-4">{{ wtf.form_field(form.paydate) }}</div>
                <div class="form-group col-md-4">{{ wtf.form_field(form.paysum) }}</div>
                <div class="btn-add" onclick="addRow(event)">+</div>
            </div>
            <script>
                function addRow(e){
                let row = e.target.parentElement.cloneNode(true)
                    row.querySelector('.btn-add').setAttribute('onclick', 'deleteRow(event)')
                    row.querySelector('.btn-add').innerText = '-'
                    row.querySelector('.btn-add').className = "btn-del"
                    e.target.parentElement.parentElement.appendChild(row)
                }
                function deleteRow(e){
                    e.target.parentElement.remove();
                }
            </script>                                                           
        <div class="row">
            <div class="form-group col-md-4">{{ wtf.form_field(form.submit) }}</div>
        </div>
    </form>
</div>
{% endblock %}
  1. 显然，我无法将数据从克隆字段传递到后端。

表格.py

class CreditForm(FlaskForm):
    currency = StringField('Currency', validators=[DataRequired()])
    paydate = DateField('Date')
    paysum = IntegerField('Sum', validators=[DataRequired()])
    isubmit = SubmitField('Upload')

路线.py

@app.route('/fixed', methods=["GET","POST"])
def fixed():
    form = CreditForm()
    result = None
    if form.validate_on_submit():
        sums = request.form.getlist('paysum')
        result = []
        for val in sums:
             result.append(val)
        return render_template("fixed.html", form=form, result=result)
    return render_template("fixed.html", form=form, result=result)

虽然我希望从具有相同名称的文件中提取所有值（在本例中为“paysum”），但我不能这样做。如果我在第一行输入某个总和，点击“+”按钮后，我会重新加载页面，并且不会创建其他字段。

我怀疑这是因为我对 form.validate_on_submit() 应用程序中的 GET/POST 方法和我的手写 JS 函数的理解不足。单击“上传”按钮后，如何修复代码以从多个表单中获取所有数据？

4

0 回答 0