양식 제출 시 버튼 비활성화

StackOverflow https://stackoverflow.com/questions/106509

  •  01-07-2019
  •  | 
  •  

문제

사용자가 여러 번 제출하는 것을 방지하기 위해 양식을 제출할 때 비활성화하고 싶은 버튼이 있습니다.

javascript onclick을 사용하여 순진하게 버튼을 비활성화하려고 시도했지만 클라이언트 측 유효성 검사에 실패하면 버튼이 비활성화된 상태로 유지됩니다.

사용자가 클릭할 때뿐만 아니라 양식이 성공적으로 제출될 때 버튼을 비활성화하려면 어떻게 해야 합니까?

이것은 ASP.NET 형식이므로 가능하다면 asp.net Ajax 페이지 수명 주기에 잘 연결하고 싶습니다.

도움이 되었습니까?

해결책

한번 시도해 보세요.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

         // Identify button as a "disabled-when-clicked" button...
         WebHelpers.DisableButtonOnClick( buttonTest, "showPleaseWait" ); 
    }

    protected void buttonTest_Click( object sender, EventArgs e )
    {
        // Emulate a server-side process to demo the disabled button during
        // postback.
        Thread.Sleep( 5000 );
    }
}



using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Text;

public class WebHelpers
{
    //
    // Disable button with no secondary JavaScript function call.
    //
    public static void DisableButtonOnClick( Button ButtonControl )
    {
        DisableButtonOnClick( ButtonControl, string.Empty );    
    }

    //
    // Disable button with a JavaScript function call.
    //
    public static void DisableButtonOnClick( Button ButtonControl, string ClientFunction )
    {   
        StringBuilder sb = new StringBuilder( 128 );

        // If the page has ASP.NET validators on it, this code ensures the
        // page validates before continuing.
        sb.Append( "if ( typeof( Page_ClientValidate ) == 'function' ) { " );
        sb.Append( "if ( ! Page_ClientValidate() ) { return false; } } " );

        // Disable this button.
        sb.Append( "this.disabled = true;" ); 

        // If a secondary JavaScript function has been provided, and if it can be found,
        // call it. Note the name of the JavaScript function to call should be passed without
        // parens.
        if ( ! String.IsNullOrEmpty( ClientFunction ) ) 
        {
            sb.AppendFormat( "if ( typeof( {0} ) == 'function' ) {{ {0}() }};", ClientFunction );  
        }

        // GetPostBackEventReference() obtains a reference to a client-side script function 
        // that causes the server to post back to the page (ie this causes the server-side part 
        // of the "click" to be performed).
        sb.Append( ButtonControl.Page.ClientScript.GetPostBackEventReference( ButtonControl ) + ";" );

        // Add the JavaScript created a code to be executed when the button is clicked.
        ButtonControl.Attributes.Add( "onclick", sb.ToString() );
    }
}

다른 팁

나는 코드 숨김에 모든 자바스크립트를 작성하는 것을 별로 좋아하지 않습니다.내 최종 솔루션은 다음과 같습니다.

단추:

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="doSubmit(this)" />

자바스크립트:

<script type="text/javascript"><!--
function doSubmit(btnSubmit) {
    if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false) { 
        return false;
    }    
    btnSubmit.disabled = 'disabled';
    btnSubmit.value = 'Processing. This may take several minutes...';
    <%= ClientScript.GetPostBackEventReference(btnSubmit, string.Empty) %>;    
}
//-->
</script>

다음 기능은 신뢰할 수 없는 비활성화 부분이 필요 없이 유용합니다."return Check_Submit ();"만 사용하십시오. 제출 버튼의 onclick 핸들러의 일부로

form_submitted 초기값 0을 유지하는 숨겨진 필드도 있어야 합니다.

<input type="hidden" name="form_submitted" value="0">

function check_submit (){
            if (document.Form1.form_submitted.value == 1){
                alert("Don't submit twice. Please wait.");
                return false;
            }
            else{
                document.Form1.form_submitted.value = 1;
                return true;
            }
            return false;
    }

제출 핸들러의 맨 끝에 있는 버튼을 비활성화하세요.유효성 검사가 실패하면 그 전에 false를 반환해야 합니다.

그러나 JavaScript 접근 방식은 신뢰할 수 있는 것이 아니므로 서버에서도 중복을 감지할 수 있는 것이 있어야 합니다.

유효성 검사에 성공하면 버튼을 비활성화합니다.그렇지 않다면 하지 마십시오.

function validate(form) {
  // perform validation here
  if (isValid) {
    form.mySubmitButton.disabled = true;
    return true;
  } else {
    return false;
  }
}

<form onsubmit="return validate(this);">...</form>

버튼의 가시성을 '없음'으로 설정합니다.


btnSubmit.Attributes("onClick") = document.getElementById('btnName').style.display = 'none';

이는 이중 제출을 방지할 뿐만 아니라 버튼을 두 번 이상 누르는 것을 원하지 않는다는 것을 사용자에게 명확하게 표시합니다.

이것이 도움이 될지는 확실하지 않지만 양식에 onsubmit 이벤트가 있습니다.양식이 제출될 때마다(버튼이나 컨트롤에서) 이 이벤트를 사용할 수 있습니다.참고로: http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

해결책은 버튼을 클릭할 때 숨겨진 필드를 숫자 1로 설정하는 것입니다.

버튼 클릭 핸들러에서 가장 먼저 해야 할 일은 그 숫자가 1이 아닌 다른 것인지 확인하는 것입니다. 함수에서 빠져나오면 됩니다.

양식에서 사용할 수 있는 onsubmit() javascript 이벤트를 활용할 수도 있습니다.이 이벤트는 양식이 실제로 제출될 때 발생하며 유효성 검사가 완료될 때까지 트랩되어서는 안 됩니다.

이것은 다른 방법보다 더 쉽지만 비슷한 방법입니다. rp 다음을 제안했습니다.

function submit(button) {
        Page_ClientValidate(); 
        if(Page_IsValid)
        {
            button.disabled = true;
        }
}

 <asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_OnClick" OnClientClick="submit(this)" Text="Submit Me" />

다음과 같은 버튼을 사용하는 경우 rp의 접근 방식은 양식을 두 번 제출합니다. UseSubmitBehavior="false".

나는 다음과 같은 rp 코드 변형을 사용합니다.

public static void DisableButtonOnClick(Button button, string clientFunction)
{
    // If the page has ASP.NET validators on it, this code ensures the
    // page validates before continuing.
    string script = "if (typeof(Page_ClientValidate) == 'function') { "
            + "if (!Page_ClientValidate()) { return false; } } ";

    // disable the button
    script += "this.disabled = true; ";

    // If a secondary JavaScript function has been provided, and if it can be found, call it.
    // Note the name of the JavaScript function to call should be passed without parens.
    if (!string.IsNullOrEmpty(clientFunction))
        script += string.Format("if (typeof({0}) == 'function') {{ {0}() }} ", clientFunction);

    // only need to post back if button is using submit behaviour
    if (button.UseSubmitBehavior)
        script += button.Page.GetPostBackEventReference(button) + "; ";

    button.Attributes.Add("onclick", script);
}

올바른(적어도 사용자 친화성에 관한 한) 방법은 OnClientClick 특성을 사용하여 버튼을 비활성화하고 클라이언트 측 유효성 검사를 수행한 다음 그 결과를 사용하여 버튼을 계속하거나 다시 활성화하는 것입니다.

물론 JavaScript가 부족하거나 특정 구현으로 인해 수행되는 유효성 검사에도 의존할 수 없으므로 이를 위해 서버측 코드도 작성해야 합니다.그러나 버튼의 활성화/비활성화 상태를 제어하는 ​​서버에 의존한다면 기본적으로 사용자가 양식을 여러 번 제출하는 것을 차단할 방법이 없습니다.이러한 이유로 짧은 시간 내에 동일한 사용자의 여러 제출(예: 동일한 세션의 동일한 값)을 감지하는 일종의 논리가 있어야 합니다.

내 솔루션 중 하나는 다음과 같습니다.

aspx 파일의 page_load에 스크립트를 추가하십시오.

    HtmlGenericControl includeMyJava = new HtmlGenericControl("script");
    includeMyJava.Attributes.Add("type", "text/javascript");
    includeMyJava.InnerHtml = "\nfunction dsbButton(button) {";
    includeMyJava.InnerHtml += "\nPage_ClientValidate();";
    includeMyJava.InnerHtml += "\nif(Page_IsValid)";
    includeMyJava.InnerHtml += "\n{";
    includeMyJava.InnerHtml += "\nbutton.disabled = true;";
    includeMyJava.InnerHtml += "}";
    includeMyJava.InnerHtml += "\n}";
    this.Page.Header.Controls.Add(includeMyJava);

그런 다음 aspx 버튼 매개변수를 다음과 같이 설정하세요.

<asp:Button ID="send" runat="server" UseSubmitBehavior="false" OnClientClick="dsbButton(this);" Text="Send" OnClick="send_Click" />

"onClientClick"은 버튼을 비활성화하는 데 도움이 되고 "UseSubmitBehaviour"는 페이지의 기존 제출 동작을 비활성화하고 asp.net이 사용자 스크립트에 따라 제출 동작을 렌더링하도록 허용합니다.

행운을 빌어요

-와카스 아슬람

<asp:Button>의 "DisableOnSubmit" 속성에 대해 다음과 같이 들었습니다.

<asp:Button ID="submit" runat="server" Text="Save"
    OnClick="yourClickEvent" DisableOnSubmit="true" />

렌더링되면 버튼의 onclick 속성은 다음과 같습니다.

onclick="this.disabled=true; setTimeout('enableBack()', 3000);
  WebForm_DoPostBackWithOptions(new
  WebForm_PostBackOptions('yourControlsName', '', true, '', '', false, true))

그리고 "enableBack()" 자바스크립트 함수는 다음과 같습니다:

function enableBack()
{
    document.getElementById('yourControlsName').disabled=false;
}

따라서 버튼을 클릭하면 3초 동안 비활성화됩니다.양식이 성공적으로 게시되면 버튼이 다시 활성화되는 것을 볼 수 없습니다.그러나 유효성 검사기가 실패하면 3초 후에 버튼이 다시 활성화됩니다.

이 모든 것은 버튼에 속성을 설정하기만 하면 됩니다. 자바스크립트 코드를 직접 작성할 필요가 없습니다.

따라서 단순히 자바스크립트를 통해 버튼을 비활성화하는 것은 브라우저 간 호환 옵션이 아닙니다.다음을 사용하면 Chrome에서 양식을 제출하지 않습니다. OnClientClick="this.disabled=true;"
다음은 Firefox 9, Internet Explorer 9 및 Chrome 16에서 테스트한 솔루션입니다.

<script type="text/javascript">
var buttonToDisable;
function disableButton(sender)
{
    buttonToDisable=sender;
    setTimeout('if(Page_IsValid==true)buttonToDisable.disabled=true;', 10);
}
</script>

그런 다음 양식 제출 버튼의 클릭 이벤트에 'disableButton'을 등록합니다. 한 가지 방법은 다음과 같습니다.

<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClientClick="disableButton(this);" />

클라이언트 측 유효성 검사가 실패하면 버튼이 비활성화되는 문제를 해결할 수 있다는 점에 주목할 가치가 있습니다.또한 서버 측 처리가 필요하지 않습니다.

@rp.의 답변을 바탕으로 사용자 정의 함수를 호출하고 성공 시 제출 및 비활성화하거나 오류 시 "중지"하도록 수정했습니다.

public static void DisableButtonOnClick(Button ButtonControl, string ClientFunction)
{
    StringBuilder sb = new StringBuilder(128);

    if (!String.IsNullOrEmpty(ClientFunction))
    {
        sb.AppendFormat("if (typeof({0}) == 'function') {{ if ({0}()) {{ {1}; this.disabled=true; return true; }} else {{ return false; }} }};", ClientFunction, ButtonControl.Page.ClientScript.GetPostBackEventReference(ButtonControl, null));
    }
    else
    {
        sb.Append("return true;");
    }

    ButtonControl.Attributes.Add("onclick", sb.ToString());
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top