Question

最近一整天，我一直在研究这个问题。我试图防止用户双击我的django项目的Submit按钮，然后两次提交表单。我也在进行表单验证，所以如果表单验证失败，我不想禁用“提交”按钮。在这种情况下，我的表单验证阻止了双重提交，因为我的表单中有一个唯一字段阻止了双重提交。我也在提交后进行了重定向，但是如果我双击提交按钮，请双击该表单，表单将失败，并且永远不会进行重定向。

我尝试了各种版本的代码，以下是类似的SO问题...

git add

作为更新，我合并了以下代码：

                  $(document).ready(function (){
                     $('form').submit(function() {
                    $('#status').attr('disabled', true);
                      });
                    });

这似乎正在起作用...但是也许我缺少了一些东西。如果用户在初次提交后第二秒钟单击该按钮，它将尝试重新提交表单，也许这是上面设计的？我想我想防止双击并允许重定向发生，如果用户没有碍事的话：)。通常情况下，我正在运行的这段代码可以正常工作……并在首次提交后进行重定向。是否有某种方法可以防止允许这种情况发生，即使用户再次单击也是如此？

对于我的代码，我试图通过我的Submit按钮传递一个值，因此，使用上面的代码可以防止在合并它时传递该值。我正在使用HTML，如下所示：

                $(document).ready(function (){
                  $("#status").click(function() {
                     if(!$("form").hasClass("submitted")){
                       $("form").addClass("submitted");
                       $("form").submit();
                     }
                   });
                 });

如果我将上面的JQuery和显示的HTML一起使用，它们似乎冲突，并且仍然不会阻止提交。

预先感谢您提供有关如何整合表单验证并防止用户双击表单并提交两次的任何想法。我也看到了一些使用特定于会话的变量的示例，但希望尽可能地使用JQuery / Javascript解决。

我刚刚测试了下面的代码，它似乎正在执行，但是未提交表单。也没有错误。

<button type="submit" class="button15" name="status" id="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

您好世界是看它是否正在执行，实际上是否正在执行。但是，我的django表单未得到处理。如果我将上面的代码与此HTML一起使用...

                $(document).ready(function (){
                  $("#status73").click(function() {
                     if(!$("form").hasClass("submitted")){
                       console.log("hello world");
                       $("form").addClass("submitted");
                       $(window).unbind('beforeunload');
                       $("form").submit();
                     }
                   });
                 });

表单未提交。如果我将上面的代码与此HTML一起使用，则表单确实会提交。...

<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

不同之处在于按钮类型。我又是新手，所以我正在学习。感谢您的输入。

我可以肯定的问题是，当按钮从Submit更改为type button时，我没有传递Submitted的值。当用户单击“提交”按钮时，有什么方法可以将值提交为隐藏状态？我尝试过类似...

<button type="submit" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

但是，这似乎并未将状态值传递给表单。什么都没发生。

我刚刚检查了控制台日志，但遇到以下错误：

<input type="hidden" name="status" value="Submitted"/>
<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

我还玩了一些隐藏值。探索以上错误。

我之前的尝试在HTML中留下了一个遗留的onsubmit操作，这引起了我的大部分悲伤。我还将状态字段更改为隐藏在表单上，而不是在HTML元素中。感谢您的所有帮助！！！!!!

Answer 1

您可以将按钮类型更改为button，并在最初提交表单时将其添加到表单中。如果课程存在，则不要提交表格。这样可以防止禁用按钮。

请参阅以下使用jQuery的示例。请注意，这是假设您的验证阻止了表单的提交。

$("#status").click(function() {
    if(!$("form").hasClass("submitted")){
      $("form").addClass("submitted");
      $("form").submit();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="">
  <input type="text"/>
  <button id="status" type="button" value="Submitted">Submit</button>
</form>

Answer 2

尝试在提交表单之前禁用按钮（请记住将按钮类型更改为 button ）：

<form id="form_id">
    {{ form }}
    <button type="button" class="button15" id="submit_button_id"><h3 
            class="txtalgn4">Submit</h3></button>
</form>


$( "#submit_button_id" ).click(function() {
    $( "#submit_button_id" ).prop('disabled', true);
    $( "#form_id" ).submit();
 });

此外，如果您需要浏览器验证：使用：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

$( "#submit_button_id" ).click(function() {
    $( "#submit_button_id" ).prop('disabled', true);
    if ( !$("#form_id").valid() ) {
        $( "#submit_button_id" ).prop('disabled', false
    }
    else {
        $( "#form_id" ).submit();
    }
});

如何防止通过表单验证进行双重提交

2 个答案: