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在多個表單處於同一頁面時提交表單兩次

回答

相關問題