防止用户通过多次单击提交按钮来发布多个提交

Question

这是我遇到的问题，当用户提交帖子并在新页面加载之前两次单击提交按钮时，会生成两个相同的帖子。我想我可以用 python 代码解决这个问题，因为我正在使用 django（限制用户在一分钟内只发布一个；即使在问题存在之后我做了http://dpaste.com/313A0A4)but。这是我的 html 代码（我的尝试没有不工作）

{% block content %}
<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form|crispy }}
<!--{% for tag in person.tags.all %}{{ tag.word }} {% endfor %}-->

     <input type="submit" name="submit" value="Create Post">
    </form>
    {% endblock %}

        {% include 'footer.html' %}
<script>


jQuery('form').on('submit', function(){ 
    if(jQuery("input[name=submit]").hasClass('active'))
        { return false; }
         else{ 
            jQuery("input[name=submit]").addClass('active'); } });

</script>

Answer 1

以下是我将如何解决您的 JavaScript 问题。我假设表单在它自己的页面上，您必须在创建帖子后重定向到/posts。

HTML：

<form id="post-form" method="post">
  <p class="bg-danger" id="error-message"></p>
  <input id="submit-post-form" class="btn btn-primary" type="submit">
</form>

JavaScript：

$(function() {
    $('#post-form').submit(handleSubmit);
});

function handleSubmit(e) {
    var $submit = $('#submit-post-form');
    $submit.prop('disabled', true)
        .addClass('disabled')
        .attr('value', 'Please Wait...');

    // Let Python do it's thing
    var request = $.ajax({
        method: "POST",
        url: "add_post",
        data: $('#post-form').serialize()
    });

    // Once Python has inserted record in database
    request.done(function(response) {
        // Display error, if any occured
        if (response.error) {
           $('#error-message').html(response.error);
           $submit.prop('disabled', false)
                  .removeClass('disabled');
           return;
        }

        // Assuming posts are found at /posts
        window.location = 'posts';

        // If you want to get fancy with the redirect you can return it from python
        // window.location = response.url;
    });

    // Prevent regular submit functionality
    e.preventDefault();
    return false;
}

Answer 2

您好，请检查以下小提琴

https://jsfiddle.net/b5c75zjr/1/

HTML

<input class="txt" type="text">
<input class="btn active" type="submit" name="submit" value="Create Post">

JQUERY

$(document).ready(function(){
 $('.btn').on('click', function(e){
 if($('.btn').hasClass('active'))
 {
 e.preventDefault();
 }
 else{
 $(this).addClass('active');
 alert('hi');
 }
 });

 $('.txt').on('change', function(){
 $('.btn').removeClass('active');
 });
});

可能是类似的东西？