양식 제출에서 제출 사용 안 함 단추

양식 제출에서 제출 사용 안 함 단추

클릭 후 웹 사이트에서 제출 단추를 비활성화하기 위해 이 코드를 작성했습니다.

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

안타깝게도 양식을 보내지 않습니다.이걸 어떻게 고칠 수 있을까요?

EDIT 양식이 아닌 제출을 바인딩하고 싶습니다 :)

해요onSubmit():

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

실제로 제출 이벤트를 트리거하기 전에 단추를 모두 비활성화하는 것입니다.

페이지에서 제출 유형의 모든 입력을 선택하지 않도록 요소의 이름을 ID 또는 CLASS로 지정하는 것도 고려해야 합니다.

시연: http://jsfiddle.net/userdude/2hgnZ/

(참고, 사용)preventDefault()그리고.return false따라서 양식이 실제로 예제에 제출되지 않습니다. 사용 중에는 사용하지 마십시오.)

특히 누군가가 문제에 직면하고 있는 경우Chrome:

이 문제를 해결하기 위해 수행해야 하는 작업은onSubmit에 태그를 달다.<form>제출 단추를 설정하는 요소disabled이렇게 하면 Chrome은 버튼을 누른 후 즉시 버튼을 비활성화할 수 있으며 양식 제출은 계속 진행됩니다.

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

비활성화된 컨트롤은 값을 제출하지 않으므로 사용자가 저장 또는 삭제를 클릭했는지 알 수 없습니다.

그래서 저는 버튼 값을 제출되는 숨겨진 곳에 저장합니다.숨겨진 이름은 버튼 이름과 동일합니다.나는 내 모든 버튼을 이름으로 부릅니다.button.

예.<button type="submit" name="button" value="save">Save</button>

이것을 바탕으로 여기서 찾았습니다.클릭한 버튼을 변수에 저장하기만 하면 됩니다.

$(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;
}

간단하고 효과적인 솔루션은

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

출처: 여기

이것은 당신의 앱에서 처리될 것입니다.

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

더 간단한 방법.저는 이것을 시도해 보았는데 잘 작동했습니다.

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

버튼 값도 제출하고 더블 폼 제출을 방지하시겠습니까?

submit 유형의 버튼을 사용하는 경우 버튼이 비활성화된 경우 발생하지 않는 버튼 값도 함께 제출하려면 양식 데이터 속성을 설정하고 나중에 테스트할 수 있습니다.

// 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);
            }
        });
    });

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

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

$(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>

가장 간단한 순수 자바스크립트 솔루션은 버튼을 간단히 비활성화하는 것입니다.

<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
  <button id="blahButton">Submit</button>
</form>

document.getElementById('blahButton').disabled = true ;

사용/사용 안 함onSubmit양식은 계속 표시되지만 제출할 수 있는 내용은 없습니다.

나의 경우 양식이 올바르게 제출되도록 약간의 지연을 가한 다음 버튼을 비활성화해야 했습니다.

$(document).on('submit','#for',function()
                {
                    var $this = $(this);
                    setTimeout(function (){
                        $this.find(':input[type=submit]').attr('disabled', 'disabled')
                    },1);
                });

제출 단추를 비활성화하는 방법

클릭 시 이벤트를 호출하고...제출하려면 true를 반환하고 제출하지 않으려면 false를 반환합니다.또는 다음과 같이 window.onload에서 함수를 호출합니다.

window.onload = init();

그리고 init()에서 다음과 같은 것을 합니다.

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

다음은 저에게 효과가 있었습니다.

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 키를 누르는 등), 제출 이벤트가 취소됩니다.

나는 블록을 사용해 왔습니다.비활성화되거나 숨겨진 버튼에서 브라우저 비호환성을 방지하기 위한 UI입니다.

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

그러면 단추에 클래스 자동 단추가 있습니다.

  $(".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>

단추 코드

<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); 
}

참고: 이번에는 사례가 여러 개일 수 있습니다. 더 많은 조건이 필요할 수 있습니다.

쉬운 방법:

Javascript & HTML:

$('form#id').submit(function(e){
    $(this).children('input[type=submit]').attr('disabled', 'disabled');
    // this is just for demonstration
    e.preventDefault(); 
    return false;
});

<!-- begin snippet: js hide: false console: true babel: false -->

<form id="id">
    <input type="submit"/>
</form>

참고: 크롬과 엣지에서 완벽하게 작동합니다.

언급URL : https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit