javascript - Make button readonly after clicking - Stack Overflow

admin管理员组

文章数量:1292808

So I have a form with multiple buttons each which have a Request mapping in a controller.

So I want to stop double submission of the form, but I can't disable the button after clicking as the controller can't get the information it needs to knwo what to do. This is the error I get:

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:

So I feel making the button readonly after clicking would fix this issue.

I have tried this so far, but it still allows the double submission.

 $('.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"/>

Any ideas how to stop the double submission without actually disabling the button.

So I have a form with multiple buttons each which have a Request mapping in a controller.

So I want to stop double submission of the form, but I can't disable the button after clicking as the controller can't get the information it needs to knwo what to do. This is the error I get:

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:

So I feel making the button readonly after clicking would fix this issue.

I have tried this so far, but it still allows the double submission.

 $('.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"/>

Any ideas how to stop the double submission without actually disabling the button.

• javascript
• jquery
• html
• spring
• forms

Share Improve this question Follow asked Nov 21, 2017 at 12:34 BlawlessBlawless 1,29933 gold badges1717 silver badges2929 bronze badges 2

• I think read-only means you are disabling button, and you can also do this by restricting the submission of your call untill your previous request won't get fulfilled first. – sumit chauhan Commented Nov 21, 2017 at 12:36
• Or you can keep the input type as button instead of submit and assign a handler that executes only once. – gurvinder372 Commented Nov 21, 2017 at 12:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Make your input of type button and assign a click handler that execute only once using one

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

<script src="https://ajax.googleapis./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"/>

本文标签： javascriptMake button readonly after clickingStack Overflow