문제
사용자가 여러 번 제출하는 것을 방지하기 위해 양식을 제출할 때 비활성화하고 싶은 버튼이 있습니다.
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());
}