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 dialog 来完成这个
脚本应该是

$.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)
});