[JQUERY] 양식 제출 '버튼을 비활성화하여 제출

양식 제출 '버튼을 비활성화하여 제출

해결법

1. ---

   1.()는 onSubmit 수행

   ()는 onSubmit 수행

   $('form#id').submit(function(){
       $(this).find(':input[type=submit]').prop('disabled', true);
   });
   

   어떤 일이 일어나고 것은 실제로 이벤트를 제출 트리거하기 전에 전부 버튼을 비활성화하고있다.

   당신이 페이지에서 형식을 제출의 모든 입력을 선택하지 않도록 당신은 아마 또한, ID 또는 클래스를 사용하여 요소 이름에 대해 생각해야한다.

   데모 : http://jsfiddle.net/userdude/2hgnZ/

   (양식은 실제하지 예에서 제출 않도록 주, 나는에서 preventDefault () 및 반환 거짓을 사용합니다. 당신의 사용이 해제를 떠나)

2. ---

   2.특히 누군가가 크롬에서 문제에 직면하는 경우 :

   특히 누군가가 크롬에서 문제에 직면하는 경우 :

   당신이이 문제를 해결하기 위해해야 ​​할 일은 불가능 제출 버튼을 설정하려면

   요소에 태그의 onsubmit 태그를 사용하는 것입니다. 이것은 누르면 양식 제출은 여전히 ​​진행됩니다 후 크롬 즉시 버튼을 비활성화 할 수 있습니다 ...

   <form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
        <input type="submit" name="submit" value="Submit" id="submit"> 
   </form>
   

3. ---

   3.장애인 컨트롤은 사용자가 저장하거나 삭제를 클릭 한 경우 알고 도움을하지 않는 그 값을 제출하지 않습니다.

   장애인 컨트롤은 사용자가 저장하거나 삭제를 클릭 한 경우 알고 도움을하지 않는 그 값을 제출하지 않습니다.

   나는 숨겨져있는 버튼 값을 저장 그래서 제출받을 않습니다. 숨겨진의 이름은 버튼 이름과 동일합니다. 나는 버튼의 이름으로 내 모든 버튼을 호출합니다.

   예를 들면 <버튼 유형 = "저장"= 이름 = "버튼"값을 "제출"> 저장

   이 내가 여기 기준으로합니다. 그냥 변수에 클릭 된 버튼을 저장합니다.

   $(document).ready(function(){
       var submitButton$;
   
       $(document).on('click', ":submit", function (e)
       {
           // you may choose to remove disabled from all buttons first here.
           submitButton$ = $(this);
       });
   
       $(document).on('submit', "form", function(e)
       {
           var form$ = $(this);
           var hiddenButton$ = $('#button', form$);
           if (IsNull(hiddenButton$))
           {
               // add the hidden to the form as needed
               hiddenButton$ = $('<input>')
                   .attr({ type: 'hidden', id: 'button', name: 'button' })
                   .appendTo(form$);
           }
           hiddenButton$.attr('value', submitButton$.attr('value'));
           submitButton$.attr("disabled", "disabled");
       }
   });
   

   여기 내 ISNULL 기능입니다. 사용 등 ISNULL 또는 정의를 위해 자신의 버전을 대체합니다

   function IsNull(obj)
   {
       var is;
       if (obj instanceof jQuery)
           is = obj.length <= 0;
       else
           is = obj === null || typeof obj === 'undefined' || obj == "";
   
       return is;
   }
   

4. ---

   4.이 앱에서의주의를 기울여야한다.

   이 앱에서의주의를 기울여야한다.

   $(":submit").closest("form").submit(function(){
       $(':submit').attr('disabled', 'disabled');
   });
   

5. ---

   5.간단하고 효과적인 솔루션입니다

   간단하고 효과적인 솔루션입니다

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

   출처 : 여기

6. ---

   6.더 간단한 방법. 나는 이것을 시도하고 나를 위해 잘 작동 :

   더 간단한 방법. 나는 이것을 시도하고 나를 위해 잘 작동 :

   $(':input[type=submit]').prop('disabled', true);
   

7. ---

   7.코드는 실제로 크롬에서 작동하지 않습니다, FF에서 작동합니다.

   코드는 실제로 크롬에서 작동하지 않습니다, FF에서 작동합니다.

   이것은 FF와 크롬에서 작동합니다.

   $(document).ready(function() {
           // Solution for disabling the submit temporarily for all the submit buttons.
           // Avoids double form submit.
           // Doing it directly on the submit click made the form not to submit in Chrome.
           // This works in FF and Chrome.
           $('form').on('submit', function(e){
             //console.log('submit2', e, $(this).find('[clicked=true]'));
             var submit = $(this).find('[clicked=true]')[0];
             if (!submit.hasAttribute('disabled'))
             {
               submit.setAttribute('disabled', true);
               setTimeout(function(){
                 submit.removeAttribute('disabled');
               }, 1000);
             }
             submit.removeAttribute('clicked');
             e.preventDefault();
           });
           $('[type=submit]').on('click touchstart', function(){
             this.setAttribute('clicked', true);
           });
         });
       </script>
   

8. ---

   8.제출 '버튼을 해제하는 방법

   제출 '버튼을 해제하는 방법

   단지의 onclick 이벤트에 함수를 호출하고 ... 제출하지 않도록 제출하는 경우는 true와 false를 돌려줍니다. 또는 같은 창로드 함수를 호출 :

   window.onload = init();
   

   및 초기화에 () 같은 것을 할 :

   var theForm = document.getElementById(‘theForm’);
   theForm.onsubmit =  // what ever you want to do 
   

9. ---

   9.다음은 나를 위해 일한 :

   다음은 나를 위해 일한 :

   var form_enabled = true;
   $().ready(function(){
          // allow the user to submit the form only once each time the page loads
          $('#form_id').on('submit', function(){
                  if (form_enabled) {
                          form_enabled = false;
                          return true;
                  }
   
                  return false;
           });
   });
   

   이것은 사용자의 시도는 형태로 여러 번 제출하면이 (등, Enter 키를 눌러하는 제출 버튼을 클릭하여) 이벤트를 제출 취소

10. ---

    10.나는 장애인이나 숨겨진 버튼 브라우저 incompatibilies을 피하기 위해 blockUI를 사용하고있다.

    나는 장애인이나 숨겨진 버튼 브라우저 incompatibilies을 피하기 위해 blockUI를 사용하고있다.

    http://malsup.com/jquery/block/#element

    그럼 내 버튼 클래스 autobutton 있습니다 :

      $(".autobutton").click(
         function(event) {
            var nv = $(this).html();
            var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
            $(this).html(nv2);
            var form = $(this).parents('form:first');
    
            $(this).block({ message: null });
            form.submit();                
            });   
    

    그런 형태는 같다 :

    <form>
    ....
    <button class="autobutton">Submit</button>   
    </form>
    

11. ---

    11.버튼 코드

    버튼 코드

    <button id="submit" name="submit" type="submit" value="Submit">Submit</button>
    

    해제 버튼

    if(When You Disable the button this Case){
     $(':input[type="submit"]').prop('disabled', true); 
    }else{
     $(':input[type="submit"]').prop('disabled', false); 
    }
    

    참고 : 케이스가이 시간보다 조건이 필요할 수 있습니다 여러 될 수 있습니다

12. ---

    12.버튼이 비활성화 된 경우 발생하지 않습니다 제출뿐만 아니라 버튼의 값을 제출하려는 유형의 버튼을 사용하는 경우, 당신은 나중에 양식 데이터 속성을 설정하고 테스트 할 수 있습니다.

    버튼이 비활성화 된 경우 발생하지 않습니다 제출뿐만 아니라 버튼의 값을 제출하려는 유형의 버튼을 사용하는 경우, 당신은 나중에 양식 데이터 속성을 설정하고 테스트 할 수 있습니다.

    // Add class disableonsubmit to your form
        $(document).ready(function () {
            $('form.disableonsubmit').submit(function(e) {
                if ($(this).data('submitted') === true) {
                    // Form is already submitted
                    console.log('Form is already submitted, waiting response.');
                    // Stop form from submitting again
                    e.preventDefault();
                } else {
                    // Set the data-submitted attribute to true for record
                    $(this).data('submitted', true);
                }
            });
        });
    

from https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit by cc-by-sa and MIT license