(클라이언트 측) 제출 버튼을 비활성화하는 가장 좋은 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/46079

문제

세부:

  • 사용자가 제출 버튼을 클릭한 후, 서버에 다시 게시하기 전에만 비활성화합니다.
  • ASP.NET 웹 양식(.NET 1.1)
  • jQuery를 선호합니다(라이브러리가 있는 경우).
  • 양식을 다시 로드하는 경우 활성화해야 합니다(예:신용카드 실패)

반드시 해야 하는 것은 아니지만, 너무 많이 바꾸지 않고 할 수 있는 간단한 방법이 있다면 그렇게 하겠습니다.(즉.간단한 해결 방법이 없으면 아마 안 할 테니 너무 깊게 파고들 걱정은 하지 마세요)

도움이 되었습니까?

해결책

모든 제출 버튼의 경우 JQuery를 통해 다음과 같습니다.

$('input[type=submit]').click(function() { this.disabled = true; });

또는 양식 제출 시 그렇게 하는 것이 더 유용할 수도 있습니다.

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

하지만 문맥에 대해 좀 더 알면 귀하의 질문에 더 나은 답변을 제공할 수 있다고 생각합니다.

이것이 Ajax 요청인 경우 성공 또는 실패 시 제출 버튼을 다시 활성화해야 합니다.

이것이 표준 HTTP 양식 제출이고(자바스크립트로 버튼을 비활성화하는 것 제외) 동일한 양식을 여러 번 제출하는 것을 방지하기 위해 이 작업을 수행하는 경우 다음을 처리하는 코드에 일종의 제어 기능이 있어야 합니다. 제출된 데이터. 왜냐하면 자바스크립트로 버튼을 비활성화해도 여러 제출이 방지되지 않을 수 있기 때문입니다.

다른 팁

다음과 같이 할 수 있습니다.

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

이것의 이점:

  • 모든 제출 방법과 모든 양식에서 작동합니다.
    • 제출 요소 클릭
    • Enter를 누르거나
    • 부름 form.submit() 다른 코드에서
  • 모든 제출 요소가 비활성화됩니다.
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • 정말 짧습니다.

제출이 처리되는 동안 제출 버튼을 두 번 이상 누르는 것을 원하지 않을 것 같습니다.

내 접근 방식은 버튼을 완전히 숨기고 대신 일종의 상태 표시기(애니메이션 gif 등)를 표시하는 것이었습니다.

다음은 매우 인위적인 예입니다(기술적으로는 프로토타입이지만 jquery 버전도 매우 비슷할 것이라고 생각합니다).

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

JQuery에서:

$('#SubmitButtonID').click(function() { this.disabled = true; });

주의할 점은 양식을 제출하기 전에 버튼을 비활성화해서는 안 된다는 것입니다.OnClick 이벤트에서 자바스크립트를 사용하여 버튼을 비활성화하면 양식 제출이 손실될 수 있습니다.

따라서 자바스크립트를 사용하여 버튼 위에 이미지를 배치하거나 버튼을 가시 범위 밖으로 이동하여 버튼을 숨기는 것이 좋습니다.그러면 양식 제출이 정상적으로 진행될 수 있습니다.

포함되어야 하는 양식을 제출하는 방법에는 세 가지가 있습니다.David McLaughlin과 Jimmy의 제안을 모두 사용하세요.하나는 제출 버튼 양식 요소를 비활성화하고 다른 하나는 기본 HTML 양식 제출을 비활성화합니다.

세 번째로, 이는 Javascript가 form.submit()을 수행하는 것을 비활성화하지 않습니다.그만큼 OnSubmit="return false" 메서드는 사용자가 제출 버튼을 클릭하거나 입력 양식 요소에서 Enter 키를 누를 때만 적용됩니다.클라이언트 측 스크립팅도 처리해야 합니다.

어때?

코드 비하인드:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

자바스크립트:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

이것은 포스트백 시간이 초과되면 발생하는 문제를 해결하지 못하지만 그 외에는 나에게 도움이 되었습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top