当多个表单位于同一页面时，WTForms 提交表单两次

Question

在我看来，我有几种不同的形式。在一个中，您输入要搜索的名字和姓氏。如果有结果，页面会刷新，用于选择用户的第二个表单显示为 table，其中单击某行会提交该行的数据。出于某种原因，提交第二个表单会导致为每个字段提交两个值：一个完全为空，一个包含正确信息。

我有一些 javascript 将在单击 table 中的一行时执行。它应该使用 table 中的数据填写并提交隐藏表单。我遇到的问题是提交表单时，提交了两组值。 request.form 表单提交后包含以下内容：

ImmutableMultiDict([('csrf_token', u'1420171907##6ad5346730985191250a52e6432e924ef05c23ee'), ('last_name', u''), ('last_name', u'Smith'), ('first_name', u''), ('first_name', u'John')])

这是脚本：

$('table#theTable tr').click(function () {
var cells = this.getElementsByTagName('td');
$('#selectuser_last_name').val(cells[0].innerHTML);
$('#selectuser_first_name').val(cells[1].innerHTML);
document.selectuser.submit();
});

这里是 HTML 一起去：

<table id="theTable">
    <thead>
        <tr>
            <th>Last</th>
            <th>First</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
            <tr>
                <td>{{ user.last_name }}</td>
                <td>{{ user.first_name }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<form id=selectUserForm action="/handle_users" method="post" name="selectuser">
    {{ forms.selectuser.hidden_tag() }}
    {{ forms.selectuser.last_name(id="selectuser_last_name") }}
    {{ forms.selectuser.first_name(id="selectuser_first_name") }}
    <input type="submit">Test</input>
</form>

我正在使用 Python 和 Flask 来处理发布的任何内容。

Answer 1

看来您实际上提交了两次 - 一次是在表单中有任何内容之前，一次是在它被填充之后（后者由 javascript，前者通过表单提交机制）。

如果用户实际上并未在表单中输入任何内容，但这是在任何时候单击一行时对服务器的简单调用。跳过整个表格，这对这里没有帮助。只需将您需要的信息传递给服务器 - 可以是简单的 ajax post:

 $('table#theTable tr').click(function () {
   var cells = this.getElementsByTagName('td');
   $.ajax({ 
        type : "POST",
        url : "/handle_users",
        async:true,
        contentType : 'application/json;charset=UTF-8',
        data: JSON.stringify({first_name:cells[0].innerHTML,last_name:cells[1].innerHTML}, null, '\t'),
        success : function(data) {
            // optional: do something when server-side processing is done 
        }
    });
});

然后在 /handle_users 路径中使用 request.get_json() 从烧瓶中获取数据。

当多个表单位于同一页面时，WTForms 提交表单两次

WTForms submitting form twice when multiple forms are in the same page

javascript

python

flask

wtforms

flask-wtforms