javascript - 单击后使按钮只读

Question

所以我有一个包含多个按钮的表单，每个按钮在 Controller 中都有一个请求映射。

所以我想停止重复提交表单，但我无法在单击后禁用该按钮，因为 Controller 无法获得它需要知道该做什么的信息。 这是我得到的错误:

org.springframework.web.bind.UnsatisfiedServletRequestParameterException: Parameter conditions "update" OR "verify" OR "reject" OR "updateCard" OR "approve" OR "withdraw" OR "updateStatusToReject" OR "updateStatusToApprove" not met for actual request parameters:

所以我觉得在点击后将按钮设置为只读可以解决这个问题。

到目前为止我已经尝试过了，但它仍然允许双重提交。

 $('.sendButton').click(function(){
        $(this).prop('readonly', true);
    });



<c:if test="${requestForm.status == 'R'}">
                <input type="submit" name="updateStatusToApprove" value="Update To Approved" tabindex="7"
                       class="sendButton" id="appealA"/>

            </c:if>
            <c:if test="${requestForm.status == 'A' || requestForm.status == 'AA'}">
                <input type="submit" name="updateStatusToReject" value="Update To Rejected" tabindex="8"
                       class="sendButton" id="appealR"/>

关于如何在不实际禁用按钮的情况下停止双重提交的任何想法。

Answer 1

让您的输入 类型 按钮 并分配一个click 处理程序，使用one 只执行一次

$('.sendButton').one( "click", function(){
    //submit the form
    $(this).closest('form').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="updateStatusToReject" value="Update To Rejected" tabindex="8" class="sendButton" id="appealR"/>