(클라이언트 측) 제출 버튼을 비활성화하는 가장 좋은 방법은 무엇입니까?
-
09-06-2019 - |
문제
세부:
- 사용자가 제출 버튼을 클릭한 후, 서버에 다시 게시하기 전에만 비활성화합니다.
- 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;
};
}
이것은 포스트백 시간이 초과되면 발생하는 문제를 해결하지 못하지만 그 외에는 나에게 도움이 되었습니다.