jQuery를의 형태의 방지를 두 번 제출

해결법

1.2018 년 업데이트 : 난 그냥이 오래된 답변을 몇 가지 포인트를 가지고, 그냥 최선의 해결책은 중복 제출은 해가되도록 동작 나무 등을하는 것을 추가하고 싶었다.

2018 년 업데이트 : 난 그냥이 오래된 답변을 몇 가지 포인트를 가지고, 그냥 최선의 해결책은 중복 제출은 해가되도록 동작 나무 등을하는 것을 추가하고 싶었다.

폼 명령을 생성하는 경우 예를 들면, 형태의 고유 ID를 넣어. 서버가 ID로 주문 제작 요청을보고 처음은 "성공"그것과 응답을 작성해야합니다. 이후 제출은 "성공"을 (경우에 클라이언트가 처음으로 반응을하지 않았다) 응답하지만 변경 아무것도 안한다.

중복은 경쟁 조건을 방지하기 위해 데이터베이스의 고유성 검사를 통해 발견해야한다.

나는 당신의 문제가이 라인이라고 생각합니다 :
```
$('input').attr('disabled','disabled');
```
당신은 누구의 데이터 양식이 예상되는 것들 제출, 내가 추측에는 요, 포함, 모든 입력을 사용하지 않도록하고 있습니다.

비활성화 바로 전송 버튼 (들)에, 당신이 할 수 있습니다 :
```
$('button[type=submit], input[type=submit]').prop('disabled',true);
```
그러나, 나는 심지어 버튼을 사용할 경우 IE가 양식을 제출합니다 생각하지 않습니다. 나는 다른 방법을 건의 할 것입니다.

우리는 다음과 같은 코드로이 문제를 해결했다. 여기에 트릭은 이미 제출 여부로 양식을 표시하는 jQuery의 데이터 ()를 사용하고 있습니다. 그런 식으로, 우리는 괴물이 밖으로 즉, 제출 버튼, 엉망으로하지 않습니다.
```
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};
```
이처럼 사용
```
$('form').preventDoubleSubmission();
```
페이지로드 당 여러 번 제출할 수 있어야 AJAX 형태가있는 경우, 당신은 다음과 같이 당신의 선택에서 제외, 그것을 나타내는 그들에게 클래스를 제공 할 수 있습니다 :
```
$('form:not(.js-allow-double-submission)').preventDoubleSubmission();
```
2.타이밍 접근 방식은 잘못된 것입니다 - 당신은 어떻게 작업이 클라이언트의 브라우저에 걸리는 시간을 알 수 있습니까?

타이밍 접근 방식은 잘못된 것입니다 - 당신은 어떻게 작업이 클라이언트의 브라우저에 걸리는 시간을 알 수 있습니까?
```
$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});
```
양식이 제출 될 때 모든 내부 전송 버튼이 비활성화됩니다.

이 상태가 기억 될 것이다 버튼을 사용하지 않는 경우 당신은 역사에 다시 갈 때 파이어 폭스에서 기억하십시오. 당신은 예를 들어, 페이지로드에있는 버튼을 활성화해야합니다 것을 방지합니다.

3.나는 나단 롱의 대답은 길을 가야하는 것입니다 생각합니다. 난 그냥 조건을 추가, 그래서 나를 위해, 나는 양식이 유효 할 것으로, 클라이언트 측 유효성 검사를 사용하고 있습니다.

나는 나단 롱의 대답은 길을 가야하는 것입니다 생각합니다. 난 그냥 조건을 추가, 그래서 나를 위해, 나는 양식이 유효 할 것으로, 클라이언트 측 유효성 검사를 사용하고 있습니다.

편집 :이 추가되지 않은 경우 클라이언트 측 유효성 검사 오류가 발생하는 경우, 사용자가 양식을 제출할 수 없을 것입니다.

        // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                var $form = $(this);

                if ($form.data('submitted') === true) {
                    // Previously submitted - don't submit again
                    alert('Form already submitted. Please wait.');
                    e.preventDefault();
                } else {
                    // Mark it so that the next submit can be ignored
                    // ADDED requirement that form be valid
                    if($form.valid()) {
                        $form.data('submitted', true);
                    }
                }
            });

            // Keep chainability
            return this;
        };

4.event.timeStamp 파이어 폭스에서 작동하지 않습니다. 거짓을 반환하는 표준이 아닌, 당신은 ()에서는 event.preventDefault를 호출해야합니다. 우리가 그것에 인 동안, 항상 제어 구조와 중괄호를 사용한다.

event.timeStamp 파이어 폭스에서 작동하지 않습니다. 거짓을 반환하는 표준이 아닌, 당신은 ()에서는 event.preventDefault를 호출해야합니다. 우리가 그것에 인 동안, 항상 제어 구조와 중괄호를 사용한다.

이전의 모든 답변을 요약하면, 여기에 일을하고 크로스 브라우저를 작동하는 플러그인입니다.
```
jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};
```
주소 Kern3l에, 타이밍 방법은 우리가 제출 버튼을 더블 클릭을 중지하려는 이유만으로 나를 위해 작동합니다. 당신이 제출에 매우 긴 응답 시간이 있다면, 나는이 스피너와 버튼 또는 양식을 제출 교체하는 것이 좋습니다.

위의 예제의 대부분처럼 완전 양식의 후속 제출을 차단 한 나쁜 부작용이있다 : 네트워크 오류가있는 경우 그들은, 그들이 그렇게 할 수없는 것하고 변경 사항을 잃게을 다시 시도 할 그들이 만든. 이것은 확실히 화가 난 사용자를 만들 것입니다.

5., JQuery와 - safeform 플러그인을 확인하시기 바랍니다.

, JQuery와 - safeform 플러그인을 확인하시기 바랍니다.

사용 예 :

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

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

6.옳은. 장애인 폼 요소의 이름 / 값을 서버로 전송되지 않습니다. 당신은 읽기 전용 요소로 설정해야합니다.

옳은. 장애인 폼 요소의 이름 / 값을 서버로 전송되지 않습니다. 당신은 읽기 전용 요소로 설정해야합니다.

또한, 앵커 그렇게 비활성화 할 수 없습니다. 당신은 필요 하나 자신하는 HREF를 제거 (권장하지 않음) 또는 예 : 기본 동작 (더 좋은 방법)을 방지 할 수 있습니다 :
```
<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>
```
7.나단 롱의 접근 방식을 향상시킬 수있는 가능성이있다. 이 일에 이미 제출 형태의 검출을위한 논리를 대체 할 수있다 :

나단 롱의 접근 방식을 향상시킬 수있는 가능성이있다. 이 일에 이미 제출 형태의 검출을위한 논리를 대체 할 수있다 :
```
var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else
```
8.당신이 jQuery를 검증 플러그인을 사용하는 일이 있다면, 그들은 이미 핸들러 구현 제출이 있고, 그 경우에 하나 이상의 구현 할 이유가 없습니다. 코드:

당신이 jQuery를 검증 플러그인을 사용하는 일이 있다면, 그들은 이미 핸들러 구현 제출이 있고, 그 경우에 하나 이상의 구현 할 이유가 없습니다. 코드:
```
jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});
```
당신은 쉽게 비활성화 입력에} 다른 {- 블록 내에서 확장 및 / 또는 버튼을 제출할 수 있습니다.

건배
9.나는 AtZako의 버전과 매우 유사한 해결책을 마련하기 위해이 게시물에서 아이디어를 사용하여 끝났다.

나는 AtZako의 버전과 매우 유사한 해결책을 마련하기 위해이 게시물에서 아이디어를 사용하여 끝났다.
```
 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};
```
다음과 같이 사용 :
```
$('#my-form').preventDoubleSubmission();
```
나는 록 아웃 트리거되면 페이지를 새로 고침 할 때까지 약간의 시간 제한의 종류 그러나 다만 장애인 제출 또는 비활성화 폼 요소 인한 문제가 포함되지 않은 솔루션을 다시 제출 할 수 없기 때문에 것을 발견했다. 아약스 물건을 그 때 나를 위해 몇 가지 문제가 발생합니다.

이것은 아마도이 아니 그 멋진 같은 비트를 prettied 할 수 있습니다.

10.양식을 게시 할 수 AJAX를 사용하는 경우, 세트 비동기 : 거짓의 형식은 지 웁니다 전에 추가을 제출하지 않도록해야한다 :

양식을 게시 할 수 AJAX를 사용하는 경우, 세트 비동기 : 거짓의 형식은 지 웁니다 전에 추가을 제출하지 않도록해야한다 :

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

11.부트 스트랩 3에 대한 나단의 솔루션을 조금 수정이 제출 버튼에 로딩 텍스트를 설정합니다. 또한 그것은 30 초 후에 타임 아웃 양식을 다시 제출 할 수 있습니다.

부트 스트랩 3에 대한 나단의 솔루션을 조금 수정이 제출 버튼에 로딩 텍스트를 설정합니다. 또한 그것은 30 초 후에 타임 아웃 양식을 다시 제출 할 수 있습니다.

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

12.를 사용하여 두 개의 버튼을 제출합니다.

를 사용하여 두 개의 버튼을 제출합니다.

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

그리고 jQuery를 :

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

13.제출 간단한 카운터를 사용합니다.

제출 간단한 카운터를 사용합니다.

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

양식을 제출와 전화 모니터 () 함수.

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

14.나는 비슷한 문제 봤는데 내 솔루션 (들)로 다음이다.

나는 비슷한 문제 봤는데 내 솔루션 (들)로 다음이다.

당신이 어떤 클라이언트 측 유효성 검사를하지 않은 경우 여기에 설명 된대로 당신은 단순히 JQuery와 한 () 메서드를 사용할 수 있습니다.

http://api.jquery.com/one/

그 호출 된 후이 핸들러를 사용하지 않습니다.
```
$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});
```
당신이 클라이언트 측 유효성 검사를하고 있다면 그때는 약간 더 까다을하고 있었다한다. 위의 예는 실패 검증 한 후 다시 제출하지 것이다. 대신이 방법을 시도
```
$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});
```

15.당신은 두 번째 이것에 의해 제출을 중지 할 수 있습니다

당신은 두 번째 이것에 의해 제출을 중지 할 수 있습니다

$("form").submit(function() {
        // submit more than once return false
        $(this).submit(function() {
            return false;
        });
        // submit once return true
        return true; // or do what you want to do
    });
});

16.내 솔루션 :

내 솔루션 :

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};

17.내가 onsubmit 체크 포인트를 포함 나단 긴 대답을 증가 그래서 내 경우에는 폼의 onsubmit 일부 유효성 검사 코드를했다

내가 onsubmit 체크 포인트를 포함 나단 긴 대답을 증가 그래서 내 경우에는 폼의 onsubmit 일부 유효성 검사 코드를했다

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        if ($form.data('submitted') === true) {
            /*Previously submitted - don't submit again */
            e.preventDefault();
        } else {
          /*Mark it so that the next submit can be ignored*/
          $form.data('submitted', true);
        }
      });

      /*Keep chainability*/
      return this;
    };

18.변경 버튼을 제출

변경 버튼을 제출

<input id="submitButtonId" type="submit" value="Delete" />

일반 버튼 :

<input id="submitButtonId" type="button" value="Delete" />

그런 다음 클릭 기능을 사용 :

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

그리고 필요한 경우 버튼을 재 활성화 기억 :

$('#submitButtonId').prop('disabled', false);

19.아무것도 아직 언급되지 않았다 : 나는 포인터 이벤트의 좋은 구식 CSS의 트릭을 믿을 수 없다. 나는 장애인 속성을 추가하여 동일한 문제가 있었지만이 다시 게시하지 않습니다. 아래 시도하고 당신의 제출 버튼의 ID와 #SubmitButton를 교체합니다.

아무것도 아직 언급되지 않았다 : 나는 포인터 이벤트의 좋은 구식 CSS의 트릭을 믿을 수 없다. 나는 장애인 속성을 추가하여 동일한 문제가 있었지만이 다시 게시하지 않습니다. 아래 시도하고 당신의 제출 버튼의 ID와 #SubmitButton를 교체합니다.
```
$(document).on('click', '#SubmitButton', function () {
    $(this).css('pointer-events', 'none');
})
```
20.왜 그냥이 아닌 -이 양식을 제출뿐만 아니라 제출 버튼을 비활성화,

왜 그냥이 아닌 -이 양식을 제출뿐만 아니라 제출 버튼을 비활성화,
```
   $('#myForm').on('submit', function(e) {
       var clickedSubmit = $(this).find('input[type=submit]:focus');
       $(clickedSubmit).prop('disabled', true);
   });
```
당신이 jQuery를 유효성 검사를 사용하는 경우 또한, 당신은 경우에 따라이 두 줄을 넣을 수 있습니다 ($ ( '# myForm을'). 유효 ()).

21.이 코드는 버튼의 라벨에 로딩하고, 설정 버튼이 표시됩니다

이 코드는 버튼의 라벨에 로딩하고, 설정 버튼이 표시됩니다

비활성화 상태, 후 처리 후, ** 재 활성화하고 원래 버튼 텍스트를 다시 반환

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
});

22.나는 사용하여 매우 비슷한 문제를 해결 :

나는 사용하여 매우 비슷한 문제를 해결 :

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});

from https://stackoverflow.com/questions/2830542/prevent-double-submission-of-forms-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 캐치 페이스트 입력 (0)	2020.09.30
[JQUERY] 어떻게 jQuery를 함께 파일 입력 크기를 확인하려면? (0)	2020.09.30
[JQUERY] 의 jQuery 유효성을 어떻게 정규 표현식 검증에 대한 규칙을 추가하려면? (0)	2020.09.30
[JQUERY] $의 양식 내부가 제대로 게시하지 .load (0)	2020.09.30
[JQUERY] 어떻게 JSON 데이터를 게시하는 JQuery와 사용할 수 있습니까? (0)	2020.09.30

복붙노트

[JQUERY] jQuery를의 형태의 방지를 두 번 제출

jQuery를의 형태의 방지를 두 번 제출

해결법

1.2018 년 업데이트 : 난 그냥이 오래된 답변을 몇 가지 포인트를 가지고, 그냥 최선의 해결책은 중복 제출은 해가되도록 동작 나무 등을하는 것을 추가하고 싶었다.

2.타이밍 접근 방식은 잘못된 것입니다 - 당신은 어떻게 작업이 클라이언트의 브라우저에 걸리는 시간을 알 수 있습니까?

3.나는 나단 롱의 대답은 길을 가야하는 것입니다 생각합니다. 난 그냥 조건을 추가, 그래서 나를 위해, 나는 양식이 유효 할 것으로, 클라이언트 측 유효성 검사를 사용하고 있습니다.

4.event.timeStamp 파이어 폭스에서 작동하지 않습니다. 거짓을 반환하는 표준이 아닌, 당신은 ()에서는 event.preventDefault를 호출해야합니다. 우리가 그것에 인 동안, 항상 제어 구조와 중괄호를 사용한다.

5., JQuery와 - safeform 플러그인을 확인하시기 바랍니다.

6.옳은. 장애인 폼 요소의 이름 / 값을 서버로 전송되지 않습니다. 당신은 읽기 전용 요소로 설정해야합니다.

7.나단 롱의 접근 방식을 향상시킬 수있는 가능성이있다. 이 일에 이미 제출 형태의 검출을위한 논리를 대체 할 수있다 :

8.당신이 jQuery를 검증 플러그인을 사용하는 일이 있다면, 그들은 이미 핸들러 구현 제출이 있고, 그 경우에 하나 이상의 구현 할 이유가 없습니다. 코드:

9.나는 AtZako의 버전과 매우 유사한 해결책을 마련하기 위해이 게시물에서 아이디어를 사용하여 끝났다.