제출 단추를 클릭한 후 비활성화하는 방법은 무엇입니까?

제출 단추를 클릭한 후 비활성화하는 방법은 무엇입니까?

양식 끝에 제출 단추가 있습니다.

제출 버튼에 다음 조건을 추가했습니다.

onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"

그러나 다음 페이지로 이동할 때 매개 변수가 전달되지 않고 null 값이 전달됩니다.

먼저 양식을 제출한 다음 제출 값을 변경해야 합니다.

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "

아마도 당신은 두 번 양식을 제출할 것입니다.를 합니다.this.form.submit()또는 추가return false

은 결국 당은끝만합니다로 끝나야 합니다.onClick="this.disabled=true; this.value='Sending…';"

IE11, FF53, GC58에서 테스트:

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"

은 의버을비해합니의 .onsubmit의 <form>:

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

다음과 이 합니다.required속성이 작동합니다.

비활성화된 HTML 양식 요소는 양식을 제출할 때 게시/받기 값과 함께 전송되지 않습니다.따라서 제출 버튼을 클릭한 후 이 제출 버튼을 비활성화하면 다음과 같이 됩니다.name특성 세트, 요소가 이제 비활성화되었기 때문에 게시/취득 값으로 전송되지 않습니다.이것은 정상적인 동작입니다.

이 문제를 해결하는 방법 중 하나는 숨겨진 폼 요소를 사용하는 것입니다.

수 시키고, 할 수 하는 것입니다.window.setTimeout('this.disabled=true',0);, 0 중입니다.', MS는 0입니다.

JQuery를 사용하면 이렇게 할 수 있습니다.

$("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);

버튼을 비활성화하면 이름=값 쌍이 매개 변수로 전송되지 않습니다.그러나 나머지 파라미터는 전송되어야 합니다(각 입력 요소와 상위 형식이 비활성화되지 않은 한).단추만 테스트하고 있거나 다른 입력 필드 또는 양식이 비활성화되어 있습니까?

Andreas Köberle의 솔루션을 확장한 드롭인 예제가 있습니다.이벤트 핸들러 및 문서 준비 이벤트에 대해 jQuery를 사용하지만 일반 JS로 전환할 수 있습니다.

(function(document, $) {

  $(function() {
    $(document).on('click', '[disable-on-click], .disable-on-click', function() {
      var disableText = this.getAttribute("data-disable-text") || 'Processing...';

      if(this.form) {
        this.form.submit();
      }

      this.disabled = true;

      if(this.tagName === 'BUTTON') {
        this.innerHTML = disableText;
      } else if(this.tagName === 'INPUT') {
        this.value = disableText;
      }
    });
  });

})(document, jQuery);

그런 다음 HTML에서 다음과 같이 사용할 수 있습니다.

<button disable-on-click data-disable-text="Saving...">Click Me</button>
<button class="disable-on-click">Click Me</button>
<input type="submit" disable-on-click value="Click Me" />

그럴 필요는 없을 것 같습니다this.form.submit()비활성화 코드가 실행되면 클릭을 전달하여 양식을 클릭합니다.

제가 사용한 또 다른 해결책은 버튼을 비활성화하는 대신 버튼을 이동하는 것입니다.이 경우에는 이러한 "사용 불가능" 문제가 없습니다.마지막으로 여러분이 진정으로 원하는 것은 사람들이 두 번 누르지 않는 것입니다. 만약 버튼이 거기에 없다면, 그들은 그것을 할 수 없습니다.

다른 단추로 바꿀 수도 있습니다.

function xxxx() {
// submit or validate here , disable after that using below
  document.getElementById('buttonId').disabled = 'disabled';
  document.getElementById('buttonId').disabled = '';
}

당신의 질문은 혼란스럽고 당신은 정말로 코드를 게시해야 하지만, 이것은 효과가 있을 것입니다.

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"

제 생각에 당신이 사용할 때this.form.submit()제출 버튼을 클릭하면 자연스럽게 발생하는 작업을 수행하는 것입니다.제출을 AJAX에서 에 대해 .submitForm()방법(상기)

, 한또돌, 는중오아중을 falseonClickattribute value를 지정하면 기본 이벤트가 실행되지 않습니다(이 경우 폼 제출).

 
    A better trick, so you don't lose the value of the button is

    function showwait() {
    document.getElementById('WAIT').style['display']='inline';
    document.getElementById('BUTTONS').style['display']='none';
    }
 

div에 표시할 랩 코드

id=WAIT style="display:display"> 표시할 텍스트(end div)

div에 숨길 코드 랩

style=DICOM style="display:display:display">로 숨길 항목... 단추 또는 숨길 항목
시 =div) 클 ="showwait";(end div)

제 경우에는 이것이 필요했습니다.

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

인터넷 익스플로러와 파이어폭스에서는 잘 작동하지만 구글 크롬에서는 작동하지 않았습니다.

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

은 버을비화하는쉬방운법은튼성활▁은라고 생각합니다.:data => { disable_with: "Saving.." } 하면 을 제출한 할 수 . 또한 "" ""와 같은 을 사용할 수 되지 않습니다 또한 다음과 같은 유효성 검사가 있는 경우 단추를 비활성화하지 않습니다.required = 'required'.

이 작업 예제에서 사용자는 JavaScript에서 중단을 정말로 원하는지 확인합니다.true이면 단추가 비활성화되어 더블클릭을 방지한 다음 데이터베이스를 업데이트하는 코드가 실행됩니다.

<asp:button id="btnAbort" runat="server" OnClick="btnAbort_Click" OnClientClick="if (!abort()) {return false;};" UseSubmitBehavior="false" text="Abort" ></asp:button>

.net이 버튼 이름을 변경할 수 있어서 문제가 있었습니다.

function abort() {
    if (confirm('<asp:Literal runat="server" Text="Do you want to abort?" />')) {
        var btn = document.getElementById('btnAbort');
        btn.disabled = true;
        btn.innerText = 'Aborting...'
        return true;
    }
    else {
        return false;
    }  
}

OnClientClick을 사용하여 OnClick을 재정의하므로 유효성 검사 방법이 성공하더라도 뒤에 있는 코드가 작동하지 않습니다.그래서 UseSubmitBehavior를 false로 설정하여 작동시킵니다.

PS: 코드가 vb.net 에 있으면 OnClick이 필요하지 않습니다!

좋아요, 완벽하게 작동하는 방법에 대해 많은 연구를 했어요.따라서 가장 좋은 옵션은 클릭 시 단추를 비활성화하기 위한 설정된 시간 초과를 만드는 것입니다.이제 백엔드에서 실행 중인 제출 함수가 있을 때 문제가 발생합니다.그런 다음 이벤트가 큐에 쌓이고 자바스크립트가 실행될 때마다"button.disabled == true"는 onclick 이벤트에 추가되며, 백엔드에서 실행 중인 제출 작업이 아닌 첫 번째 작업(즉, 버튼 비활성화)만 트리거됩니다(이 백엔드 제출 기능은 $.ajax 등으로 구성될 수 있습니다).

Single 버튼을 클릭하여 비활성화하려면 다음을 클릭합니다.

function() { //i always create annonymous function to avoid polluting global 
    space
    var btn = document.getElementsByClassName("btn");
    btn.onclick = function() {
        setTimeout(function() {
            backButton.disabled = true;
        }, 0);
    };
}
}();

이 코드는 단추를 비활성화하고 대기열에서 기능을 실행합니다.timeout = 0은 실제로 후속 백엔드 작업을 실행하는 데 사용됩니다.

화면에서 모든 btn을 비활성화하는 경우:

(function() {
    let i, element, list, o;
    element = document.getElementsByClassName("classx");
    if (element) {
        element = element[0];
        list = element.getElementsByTagName("button");
        for (i = 0; i < list.length; i++) {
            o = list[i];
            o.onclick = function() {
                setTimeout(function() {
                    let i;
                    for (i = 0; i < list.length; i++) {
                        list[i].disabled = true;
                    }
                }, 0);
                return true;
            }
        }
    }
})();

이렇게 하면 페이지에 있는 모든 단추를 비활성화할 수 있습니다.(사용 사례에 따라 사용하시면 됩니다.)또한, 이 (비활성화된 버튼)은 set timeout=0, 기능 설명에 대한 좋은 사용 사례입니다. 현재 "javascript 이벤트"가 끝날 때까지 통화를 "실행"하기 때문입니다.

감사합니다. 그리고 이것이 미래의 누군가에게 도움이 되기를 바랍니다.

저는 그 속임수를 썼어요.시간 초과를 설정하면 완벽하게 작동하며 모든 값을 전송합니다.

    $(document).ready(function () {
        document.getElementById('btnSendMail').onclick = function () {
            setTimeout(function () {
                document.getElementById('btnSendMail').value = 'Sending…';
                document.getElementById('btnSendMail').disabled = true;
            }, 850);
        }
    });

언급URL : https://stackoverflow.com/questions/3366828/how-to-disable-submit-button-once-it-has-been-clicked