Django表单:禁用提交按钮并在完成后重新启用

时间:2014-08-26 15:56:46

标签: javascript jquery html django forms

我有一个高度自定义的投票表单,使用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();
});

这在某种程度上有效,但实际上并没有将用户重定向到&#34;投票&#34;页面完成后...它成功提交投票(或者如果出现错误则没有)并且在完成投票表单页面后仍然保留在投票表单页面上,向用户提供零反馈发生了什么,尽管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. &#34;投票&#34;页面已加载
  4. 重新启用提交按钮(以防用户按下     后退按钮提交另一个投票
  5. 这里的任何指导都会受到赞赏,我觉得我让事情变得比他们需要的更复杂。

1 个答案:

答案 0 :(得分: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)
});