Django表單：禁用提交按鈕並在完成后重新啟用

Question

我有一個高度定制的投票表格，該表格是使用Javascript動態生成的，一旦提交，它會將您重定向到另一個頁面（“已投票”），該頁面要么a）報告用戶成功提交后所投票的內容，要么b）報告錯誤提交失敗后發生的情況。 一個可能的錯誤是，如果已經使用了選民名稱，在這種情況下，它會指示用戶選擇其他名稱。

我的問題是，如果用戶雙擊“提交”按鈕，則成功提交了投票，但是之后由於兩次使用了投票者的名字（即出現了兩次發帖）而導致提交失敗。 用戶最終完全跳過了成功的投票頁面，看起來好像沒有計入其原始投票，並說該名稱已被使用。

我表單的標簽如下所示：

<form id="formVote" name="formVote" action="{% url 'surveys:voted' survey.id %}" method="POST">

我希望能夠在提交時禁用“提交”按鈕，但是我不知道如何使用上面的代碼來做到這一點。 我嘗試過的是這樣標記表單：

<form id="formVote" name="formVote" action="" method="POST">

並調用一個JQuery函數來處理事情：

$('#formVote').submit(function(e){

// disable vote button to prevent double submissions
document.getElementById('submit_vote_button').disabled = true;
document.getElementById('submit_vote_button').value = "Submitting...";

// submit the vote
$.post('{% url 'surveys:voted' survey.id %}', $(this).serialize(), function(data){
document.getElementById('submit_vote_button').disabled = false;
document.getElementById('submit_vote_button').value = "Submit Vote";
});

e.preventDefault();
});

這項工作有些奏效，但是在完成操作時並沒有真正將用戶重定向到“已投票”頁面……它成功提交了投票（如果有錯誤，則不會提交投票），並且當這樣就完成了，盡管views.py投票視圖返回了渲染，但仍向用戶提供了關於發生的情況的零反饋：

return render(request, 'surveys/voted.html', {
            'error_message': error_message,
            'voter_name': voter_name,
            'ranking_id_array_final': ranking_id_array_final,
            'survey_id': survey_id,
            'survey_opened': survey_opened,
        })

同樣，當我嘗試使用HttpResponseRedirect時，它什么也沒做。

我需要發生的是：

1. 提交按鈕被禁用
2. POST請求已提交
3. “已投票”頁面已加載
4. 重新啟用了“提交”按鈕（ 以防用戶按下“后退”按鈕再次提交投票 ）

這里的任何指導將不勝感激，我覺得我正在使事情變得比他們需要的復雜。

Answer 1

您可以在模式或浮動div中顯示data變量內容，以顯示用戶發生了什么情況。 該變量保存模板的渲染html（將其所有邏輯與傳遞給它的所有參數結合使用）
也許您可以使用jquery對話框來完成此操作
該腳本應為

$.post('{% url 'surveys:voted' survey.id %}', $(this).serialize(), function(data){
    document.getElementById('submit_vote_button').disabled = false;
    $( "#dialog-message" ).dialog({
          modal: true,
          buttons: {
            Ok: function() {
              $( this ).dialog( "close" );
            }
          }
        });
     $( "#dialog-message" ).html(data) //here goes your data var (rendered html from your django template)
});