두 번 클릭을 방지하기 위해 제출 버튼을 비활성화 할 때 양식 게시물이 게시되지 않는 이유는 무엇입니까?

https://stackoverflow.com/questions/400616

03-07-2019
|

문제

지구상의 다른 모든 웹 개발자와 마찬가지로 사용자가 내 양식에서 제출 버튼을 두 번 클릭하는 데 문제가 있습니다. 내 이해는이 문제를 처리하는 기존의 방법은 첫 클릭 직후 버튼을 비활성화하는 것입니다. 게시되지 않습니다.

나는 이것에 대해 약간의 연구를했고, 하나님은 충분한 정보가 있다는 것을 알고 있지만 다른 질문은 양식 제출에서 버튼을 비활성화합니다, 버튼을 비활성화하는 것이 작동하는 것 같습니다. 원래 포스터 제출 후 버튼을 비활성화합니다 나와 같은 문제를 겪은 것으로 보이지만, 그가 어떻게 해결했는지에 대한 언급은 없습니다.

반복하는 방법에 대한 코드는 다음과 같습니다 (IE8 Beta2에서 테스트되었지만 IE7에서도 같은 문제가있었습니다).

내 ASPX 코드

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
    function btn_onClick()
    {
        var chk = document.getElementById("chk");
        if(chk.checked)
        {
            var btn = document.getElementById("btn");
            btn.disabled = true;
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <asp:Literal ID="lit" Text="--:--:--" runat="server" />
        <br />
        <asp:Button ID="btn" Text="Submit" runat="server" />
        <br />
        <input type="checkbox" id="chk" />Disable button on first click
    </form>
</body>
</html>

내 CS 코드

using System;

public partial class _Default : System.Web.UI.Page 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btn.Click += new EventHandler(btn_Click);
        btn.OnClientClick = "btn_onClick();";
    }

    void btn_Click(object sender, EventArgs e)
    {
        lit.Text = DateTime.Now.ToString("HH:mm:ss");
    }
}

버튼을 클릭하면 포스트 백이 발생하고 시간이 업데이트됩니다. 그러나 확인란을 확인하면 다음에 버튼을 클릭하면 버튼이 비활성화되었지만 (예상대로) 비활성화되지만 Postback은 절대 수행하지 않습니다.

내가 여기서 내가 여기서 무엇을 놓치고 있습니까 ???

미리 감사드립니다.

해결책

이 태그가 놓친 것 같아요.

UseSubmitBehavior="false"

다음과 같이 시도하십시오.

<asp:Button ID="btnUpdate" runat="server" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate()) { this.disabled = true; } else {return false;}" Text = "Update" CssClass="button" OnClick="btnUpdate_Click" ValidationGroup="vgNew"/>

설명

다른 팁

Fallen888은 맞습니다. 귀하의 접근 방식은 크로스 브라우저가 작동하지 않습니다. 나는 사용한다 이 작은 스 니펫 두 번 클릭하지 않으려면

UseSubmitBehavior="false" 제출 버튼을 일반 버튼으로 변환합니다 (<input type="button">). 이런 일이 발생하지 않으려면 제출 버튼을 숨기고 즉시 비활성화 버튼을 삽입 할 수 있습니다. 이것은 너무 빨리 발생하기 때문에 버튼이 사용자에게 비활성화되는 것처럼 보일 것입니다. 세부 사항이 있습니다 Josh Stodola의 블로그.

코드 예제 (jQuery) :

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});

"비활성화"HTML 컨트롤이 모든 주요 브라우저에서 항상 일관된 동작을 생성하지는 않습니다. 따라서 (ASP.NET 모델로 작업)이 경우 클라이언트 및 서버에서 요소의 상태를 추적해야하기 때문에 클라이언트 측에서 그 일을 피하려고합니다.

내가하는 일은 버튼의 클래스 이름을 다음을 포함하는 CSS 클래스로 전환하여 창의 보이는 부분에서 버튼을 이동하는 것입니다.

.hiddenButton
{
  position: absolute;
  top: -1000px;
  left: -1000px;
}

이제 버튼 대신에 무엇을 넣을까요?

장애인 버튼처럼 보이는 이미지 중 하나입니다
아니면 "잠깐만 기다려주세요 ..."라는 평범한 텍스트

그리고 이것은 같은 방식으로 수행 될 수 있지만 반대로 수행 할 수 있습니다. 페이지로드에서 요소가 숨겨지는 것으로 시작한 다음 양식 제출의 가시 클래스 이름으로 전환하십시오.

다음 jQuery 스크립트를 사용하여 비활성화합니다 모든 버튼 (입력 유형 = 제출 및 버튼), 언제 하나의 버튼 클릭됩니다.

우리는 방금 글로벌 JavaScript 파일에 스크립트를 포함 시켰으므로 새 버튼을 만들 때 아무것도 기억할 필요가 없습니다.

$(document).ready(function() {
    $(":button,:submit").bind("click", function() {
        setTimeout(function() {
            $(":button,:submit").attr("disabled", "true");
        }, 0);
    });
});

이 스크립트는 page_clientValidate ()를 확인하여 쉽게 확장 할 수 있습니다.

document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};

이것은 정확하고 간단한 방법입니다.

위의 허용 솔루션과 달리 모든 브라우저에서 작동합니다.

애플리케이션에서 도우미 메소드를 만듭니다 (Utlity 네임 스페이스에서는) :

    Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button, ByRef page As System.Web.UI.Page)
        button.Attributes.Add("onclick", "this.disabled=true;" + page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString)
    End Sub

이제 각 웹 페이지 뒤의 코드에서 간단히 호출 할 수 있습니다.

    Utility.PreventMultipleClicks(button1, page)

여기서 Button1은 여러 번의 클릭을 방지하려는 버튼입니다.

이것이하는 일은 단순히 온 클릭 핸들러를 다음과 같이 설정하는 것입니다. this.disabled = true

그런 다음 버튼 자체의 Post Back Handler를 추가하여 다음을 얻습니다.

onclick = "this.disabled = true"; __ dopostback ( 'id $ id', ''); "

이렇게하면 페이지의 기본 동작을 중단하지 않으며 예상대로 모든 브라우저에서 작동합니다.

즐기다!

디버깅 목적으로 if (chk.checked)에 대해 다른 조항을 넣으면 어떻게됩니까?

JavaScript 함수가 true (또는 부울 진짜로 평가하는 값)를 반환하는지 확인하십시오. 그렇지 않으면 양식이 제출되지 않습니다.

function btn_click()
var chk = document.getElementById("chk");
    if(chk.checked)
    {
            var btn = document.getElementById("btn");
            btn.disabled = true;
            return true;   //this enables the controls action to propagate
    }
    else    return false;  //this prevents it from propagating
}

jQuery 사용자의 경우

jQuery 이벤트 리스너를 사용할 때 ASP.NET 버튼의 OnClick 이벤트에 JavaScript를 직접 추가하려는 모든 종류의 문제가 발생합니다.

버튼을 비활성화하고 포스트 백을 작동시키는 가장 좋은 방법을 찾았습니다.

    $(buttonID).bind('click', function (e) {

        if (ValidateForm(e)) {

            //client side validation ok!
            //disable the button:
            $(buttonID).attr("disabled", true);

            //force a postback:
            try {
                __doPostBack($(buttonID).attr("name"), "");
                return true;
            } catch (err) {
                return true;
            }

        }
        //client side validation failed!
        return false;
    });

어디에 validateform 양식이 클라이언트 측을 확인하면 true 또는 false를 반환하는 사용자 정의 검증 함수입니다.

그리고 BUTTILID '#button1'과 같은 버튼의 ID입니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow