WTForms在多个表单处于同一页面时提交表单两次

在我看来，我有几种不同的表单。在一个你输入名字和姓氏来搜索。如果有结果，页面刷新并且第二个表格选择一个用户被显示为一个表格，在该表格上点击一行以提交该行中的数据。出于某种原因，提交第二个表单会导致为每个字段提交两个值：一个完全为空，另一个为正确的信息。WTForms在多个表单处于同一页面时提交表单两次

我有一些JavaScript将在单击表中的一行时执行。它应该填写并提交隐藏表格和表格中的数据。我遇到的问题是，当提交表单时，会提交两组值。在提交表格后的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>

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

来源

2015-01-02 PearSquirrel

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

如果用户没有真正向表单中输入任何内容，但是这是在单击某一行时对服务器的简单调用。跳过整个表格，在这里没有帮助。只是通过调用服务器与信息，你需要 - 可以是一个简单的AJAX后：

$('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()烧瓶您的数据。

来源

2015-01-02 06:12:19

不错！但你如何去验证？ WTForms使这很容易。 – PearSquirrel

@PearSquirrel，如果它解决了您提出的问题，请接受答案。更重要的是，如果没有用户输入，只需单击一行，就可以检查表中的数据。例如，您可以有条件地对有效和无效行着色，并使无效行处于非活动状态（'无法点击'）。有许多jQuery表插件可以用表，ajax，jquery等进行更复杂的工作。我使用DataTables（请参阅DataTables.net）成功。 –

WTForms在多个表单处于同一页面时提交表单两次

回答

相关问题