Почему моя форма не публикуется, когда я отключаю кнопку отправки, чтобы предотвратить двойной щелчок? - PullRequest
Новая
       47

Почему моя форма не публикуется, когда я отключаю кнопку отправки, чтобы предотвратить двойной щелчок?

8 голосов
/ 30 декабря 2008

Как и у любого веб-разработчика на планете, у меня есть проблема с пользователями, дважды щелкающими по кнопке «Отправить» в моих формах. Насколько я понимаю, обычным способом решения этой проблемы является отключение кнопки сразу после первого щелчка, однако, когда я делаю это, не отправляет .

Я провел некоторое исследование по этому вопросу, бог знает, что информации достаточно, но другие вопросы, такие как Отключить кнопку при отправке формы , отключение кнопки, похоже, работает. У оригинального плаката кнопки Отключить после отправки , похоже, была та же проблема, что и у меня, но нет упоминания о том, как / если он решил ее.

Вот некоторый код о том, как это повторить (протестировано в 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");
    }
}

Обратите внимание, что при нажатии кнопки происходит обратная передача, и время обновляется. Но когда вы устанавливаете флажок, при следующем нажатии кнопки кнопка будет отключена (как и ожидалось), но обратная передача не выполняется.

ЧТО, ЧЕРТ, Я ЗДЕСЬ ЗДЕСЬ ???

Заранее спасибо.

Ответы [ 10 ]

9 голосов
/ 30 декабря 2008

Я думаю, вы просто пропустили этот тег: 

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"/>

Пояснение

6 голосов
/ 30 декабря 2008

fallen888 правильно, ваш подход не работает кросс-браузер. Я использую этот маленький фрагмент , чтобы предотвратить двойной щелчок.

5 голосов
/ 27 июня 2009

UseSubmitBehavior="false" преобразует кнопку отправки в обычную кнопку (<input type="button">). Если вы не хотите, чтобы это произошло, вы можете скрыть кнопку отправки и сразу же вставить отключенную кнопку на ее место. Поскольку это происходит так быстро, это выглядит как отключение кнопки для пользователя. Подробности в блоге Джоша Стодола .

Пример кода (jQuery): 

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});
4 голосов
/ 30 декабря 2008

«Отключение» HTML-элементов управления не всегда приводит к согласованному поведению во всех основных браузерах. Поэтому я стараюсь не делать этого на стороне клиента, потому что (работая с моделью ASP.NET) вам необходимо отслеживать состояние элемента на клиенте и сервере в этом случае.

Я бы переместил кнопку за пределы видимой части окна, переключив className кнопки на класс CSS, который содержит следующее: 

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

Теперь, что поставить вместо кнопки?

  1. Либо изображение, похожее на отключенную кнопку
  2. Или просто текст с надписью "Пожалуйста, подождите ..."

И это можно сделать так же, но в обратном порядке. Начните с того, что элемент скрывается при загрузке страницы, а затем переключитесь на видимое имя класса в форме отправки.

2 голосов
/ 30 марта 2010

Мы используем следующий скрипт JQuery, чтобы отключить все кнопки (тип ввода = отправить и кнопка), когда одна кнопка нажата.

Мы только что включили скрипт в глобальный файл JavaScript, поэтому нам не нужно ничего запоминать при создании новых кнопок. 

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

Этот скрипт может быть легко расширен проверкой Page_ClientValidate ().

1 голос
/ 29 октября 2011

Это правильный и простой способ сделать это:

Работает во всех браузерах (в отличие от принятого решения выше).

Создайте вспомогательный метод в вашем приложении (скажем, в пространстве имен 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

, а затем добавляет кнопки собственного обработчика обратной записи, так что мы получаем:

OnClick = "this.disabled = истина"; __ doPostBack ( 'ID $ ID', ''); "

Это не нарушает поведение страницы по умолчанию и работает во всех браузерах, как и ожидалось.

Наслаждайтесь!

1 голос
/ 30 декабря 2008 
document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};
0 голосов
/ 31 октября 2011

ДЛЯ ПОЛЬЗОВАТЕЛЕЙ JQUERY

При использовании прослушивателей событий jQuery вы столкнетесь с множеством проблем, пытаясь добавить javascript непосредственно к событию onClick на кнопках ASP.NET.

Я нашел лучший способ отключить кнопки и заставить работать обратную передачу - сделать что-то вроде этого: 

    $(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, если ваша форма проверяет клиентскую сторону.

И buttonID - это идентификатор вашей кнопки, такой как '# button1'

0 голосов
/ 30 декабря 2008

Убедитесь, что ваша функция javascript возвращает true (или значение, которое будет оцениваться как логическое 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
}
0 голосов
/ 30 декабря 2008

В целях отладки, что произойдет, если вы положите предложение else против if (chk.checked)?

...