Каков наилучший подход к отключению (на стороне клиента) кнопки отправки?

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

Вопрос

Подробности:

  • Отключить только после того, как пользователь нажмет кнопку отправки, но перед отправкой обратно на сервер.
  • Веб-формы ASP.NET (.NET 1.1)
  • Предпочитаю jQuery (если вообще есть библиотека)
  • Должен быть включен, если форма перезагружается (т.кредитная карта не удалась)

Мне не обязательно это делать, но если есть простой способ сделать это без необходимости слишком многого менять, я это сделаю.(т.е.если нет простого решения, я, вероятно, не буду этого делать, так что не беспокойтесь о том, что копаете слишком глубоко)

Это было полезно?

Решение

Для всех кнопок отправки через JQuery это будет:

$('input[type=submit]').click(function() { this.disabled = true; });

Или может быть более полезно сделать это при отправке формы:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

Но я думаю, что мы могли бы дать лучший ответ на ваш вопрос, если бы знали немного больше о контексте.

Если это запрос ajax, вам необходимо снова включить кнопки отправки в случае успеха или неудачи.

Если это стандартная отправка HTTP-формы (кроме отключения кнопки с помощью JavaScript) и вы делаете это для защиты от нескольких отправок одной и той же формы, тогда вам следует иметь какой-то контроль в коде, который имеет дело с отправленные данные, поскольку отключение кнопки с помощью JavaScript может не предотвратить множественную отправку.

Другие советы

Вы можете сделать что-то вроде этого:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Преимущества этого:

  • Он будет работать со всеми вашими формами и всеми способами отправки:
    • щелчок по элементу отправки
    • нажав Enter, или
    • звоню form.submit() из какого-то другого кода
  • Он отключит все элементы отправки:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • это действительно коротко.

Я предполагаю, что вы не хотите, чтобы они нажимали кнопку отправки более одного раза во время обработки отправки.

Мой подход заключался в том, чтобы полностью скрыть кнопку и вместо нее отобразить какой-то индикатор состояния (анимированный gif и т. д.).

Вот очень надуманный пример (технически это прототип, но я думаю, что версия jquery будет очень похожа):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

в JQuery:

$('#SubmitButtonID').click(function() { this.disabled = true; });

Следует помнить, что не следует отключать кнопку до отправки формы.Если вы отключите кнопку с помощью javascript в событии OnClick, вы можете потерять отправку формы.

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

Есть три способа отправить форму, которую следует заполнить.Используйте предложения Дэвида Маклафлина и Джимми.Один отключит элемент формы кнопки отправки, а другой отключает отправку базовой HTML-формы.

В-третьих, они не отключат Javascript от выполнения form.submit().А OnSubmit="return false" Метод применяется только тогда, когда пользователь нажимает кнопку отправки или нажимает Enter в элементе формы ввода.Также потребуется обработка сценариев на стороне клиента.

Как насчет

Код позади:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

Javascript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

Это не решает проблему того, что произойдет, если время обратной передачи истечет, но в остальном у меня это сработало.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top