У меня есть кнопка, которую я хотел бы отключить, когда форма отправляется, чтобы пользователь не отправлял несколько раз.
Я попытался наивно отключить кнопку с 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() );
}
}
Я не большой поклонник написания всего этого javascript в коде. Вот как выглядит мое окончательное решение.
Кнопка
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="doSubmit(this)" />
JavaScript:
<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" />
Просто услышал о свойстве "DisableOnSubmit" кнопки < asp: Button > , например:
<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))
И функция javascript функции enableBack() выглядит следующим образом:
function enableBack()
{
document.getElementById('yourControlsName').disabled=false;
}
Таким образом, при нажатии кнопки она отключается на 3 секунды. Если форма успешно завершена, вы никогда не увидите, как кнопка снова включается. Если, однако, все валидаторы терпят неудачу, кнопка снова включается через 3 секунды.
Все это, просто установив атрибут на кнопку - код javascript не должен быть написан вручную.
Обратите внимание, что подход 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. Однако, если вы полагаетесь на сервер, управляющий статусом включения/отключения кнопки, у вас в принципе нет возможности блокировать пользователя, отправляющего форму несколько раз в любом случае. По этой причине у вас должна быть некоторая логика для обнаружения нескольких представлений от одного и того же пользователя за короткий промежуток времени (например, одинаковые значения из того же сеанса).
одно из моих решений следующее:
добавьте script в page_load вашего файла aspx
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 отображать поведение отправки пользователя script.
удача
-Waqas Aslam
Таким образом, простое отключение кнопки с помощью javascript не является совместимым с кросс-браузером. 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" с событием click вашей кнопки отправки формы, одним из способов является:
<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());
}