클라이언트 측에서 양식이 여러 번 제출되는 것을 방지하는 방법은 무엇입니까?

응답이 느리면 제출 버튼을 여러 번 클릭 할 수 있습니다.

이런 일이 발생하지 않도록 방지하는 방법은 무엇입니까?

이미 제출 된 양식에서 제출 이벤트를 비활성화하려면 눈에 잘 띄지 않는 자바 스크립트를 사용하십시오. 다음은 jQuery를 사용하는 예입니다.

편집 : 제출 버튼을 클릭하지 않고 양식을 제출하는 문제를 수정했습니다. 고마워, 이치 반.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

asp mvc 3 unobtrusive validation과 함께 vanstee의 솔루션 을 시도 했으며 클라이언트 유효성 검사가 실패하면 코드가 계속 실행되고 양식 제출이 영구적 으로 비활성화됩니다. 필드를 수정 한 후 다시 제출할 수 없습니다. (bjan의 의견 참조)

그래서 vanstee의 스크립트를 다음과 같이 수정했습니다.

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

클라이언트 측 양식 제출 제어는 onsubmit 핸들러가 제출 단추를 숨기고로드 애니메이션으로 대체함으로써 매우 우아하게 달성 할 수 있습니다. 이렇게하면 사용자가 자신의 행동 (클릭)이 발생한 지점에서 즉각적인 시각적 피드백을받을 수 있습니다. 동시에 양식이 다른 시간에 제출되는 것을 방지합니다.

XHR을 통해 양식을 제출하는 경우 제출 오류 (예 : 시간 초과)도 처리해야합니다. 사용자 가 양식 을 다시 제출 해야 하므로 제출 단추를 다시 표시해야합니다 .

또 다른 메모에서 llimllib는 매우 유효한 지점을 제시합니다. 모든 양식 유효성 검사는 서버 측에서 발생해야합니다. 여기에는 여러 제출 확인이 포함됩니다. 클라이언트를 신뢰하지 마십시오! 자바 스크립트가 비활성화 된 경우에만 해당되는 것은 아닙니다. 모든 클라이언트 측 코드를 수정할 수 있음을 명심해야합니다. 상상하기는 다소 어렵지만 서버와 대화하는 html / javascript가 반드시 작성한 html / javascript가 아닐 수 있습니다.

llimllib가 제안한대로 해당 양식에 대해 고유 한 식별자로 양식을 생성하고 숨겨진 입력 필드에 넣습니다. 그 식별자를 저장하십시오. 양식 데이터를 수신 할 때 식별자가 일치 할 때만 처리합니다. (또한 추가 보안을 위해 식별자를 사용자 세션에 연결하고 일치시킵니다.) 데이터 처리 후 식별자를 삭제합니다.

물론 가끔 양식 데이터가 제출되지 않은 식별자를 정리해야합니다. 그러나 아마도 귀하의 웹 사이트는 이미 일종의 "가비지 수집"메커니즘을 사용하고있을 것입니다.

<form onsubmit="if(submitted) return false; submitted = true; return true">

이를 수행하는 간단한 방법은 다음과 같습니다.

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

클릭 직후 제출 버튼을 비활성화하십시오. 유효성 검사를 올바르게 처리해야합니다. 또한 모든 처리 또는 DB 작업을위한 중간 페이지를 유지하고 다음 페이지로 리디렉션합니다. 이렇게하면 두 번째 페이지를 새로 고침해도 다른 처리가 수행되지 않습니다.

현재 시간을 해시하고 양식에 숨겨진 입력으로 만듭니다. 서버 측에서 각 양식 제출의 해시를 확인하십시오. 이미 해당 해시를 받았다면 반복 제출이있는 것입니다.

편집 : 자바 스크립트에 의존하는 것은 좋은 생각이 아니므로 모든 사람들이 계속해서 그 아이디어를 찬성 할 수 있지만 일부 사용자는이를 활성화하지 않을 것입니다. 정답은 서버 측에서 사용자 입력을 신뢰하지 않는 것입니다.

진행률 표시 줄이나 스피너를 표시하여 양식이 처리 중임을 나타낼 수도 있습니다.

JQuery를 사용하면 다음을 수행 할 수 있습니다.

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

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

질문에 'javascript'태그를 붙인 것을 알고 있지만 여기에 자바 스크립트에 전혀 의존하지 않는 해결책이 있습니다.

PRG 라는 웹앱 패턴 이며 여기에 이를 설명 하는 좋은 기사 가 있습니다.

다음과 같이 간단하게 여러 제출을 방지 할 수 있습니다.

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

이 질문에 대한 가장 간단한 대답은 다음과 같습니다. "응답이 느릴 때 제출 버튼을 여러 번 클릭 할 수 있습니다.이 문제를 방지하는 방법은 무엇입니까?"

아래 코드와 같이 양식 제출 버튼을 비활성화하십시오.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

제출을 위해 처음 클릭하면 제출 버튼이 비활성화됩니다. 또한 몇 가지 유효성 검사 규칙이 있으면 제대로 작동합니다. 도움이되기를 바랍니다.

클라이언트 측에서는 @vanstee 및 @chaos에서 제공하는 방법과 같이 자바 스크립트 코드로 양식이 제출되면 제출 버튼을 비활성화해야합니다.

그러나 네트워크 지연이나 자바 스크립트 사용이 불가능한 상황에 대한 문제가있어이를 방지하기 위해 JS에 의존해서는 안됩니다.

따라서 서버 측에서는 동일한 클라이언트의 반복 제출을 확인하고 사용자의 잘못된 시도로 보이는 반복 된 제출을 생략해야합니다.

safeform jquery 플러그인을 사용해 볼 수 있습니다 .

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

나를위한 가장 간단하고 우아한 솔루션 :

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

추가 링크 ...

양식에서이 코드를 사용하면 여러 번의 클릭을 처리합니다.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

확실히 작동합니다.

2 초마다 제출할 수 있습니다. 전면 검증의 경우.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

다중 제출을 방지하는 가장 좋은 방법은 메서드에 버튼 ID를 전달하는 것입니다.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

자바 스크립트를 사용하여이 작업을 수행하는 것은 약간 쉽습니다. 다음은 원하는 기능을 제공하는 코드입니다.

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

가장 간단한 해결책은 클릭시 버튼을 비활성화하고 작업이 완료된 후 활성화하는 것입니다. jsfiddle에서 유사한 솔루션을 확인하려면 다음을 수행하십시오.

[click here][1]

그리고이 답변에 대한 다른 해결책을 찾을 수 있습니다 .

이것은 나를 위해 매우 잘 작동합니다. 농장을 제출하고 버튼을 비활성화하고 2 초 후에 버튼을 활성화합니다.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

ECMA6 Syntex에서

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

브라우저 입력 유효성 검사를 우회하지 않고 가능한 답변을 추가하기 위해

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

이전에 제안 된 것에 대한 대안은 다음과 같습니다.

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});