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

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

10 голосов
/ 05 сентября 2008

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

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

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

Ответы [ 7 ]

11 голосов
/ 05 сентября 2008

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

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

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

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

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

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

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

8 голосов
/ 30 октября 2008

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

$('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;
        })
    ;
});

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

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

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

Мой подход состоял в том, чтобы просто полностью скрыть кнопку и вместо нее отобразить какой-нибудь индикатор состояния (анимированный 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>
1 голос
/ 30 октября 2008

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

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

1 голос
/ 05 сентября 2008

в JQuery: 

$('#SubmitButtonID').click(function() { this.disabled = true; });
0 голосов
/ 30 октября 2008

Как насчет

Код позади :

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

1010 * Javascript *: 

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

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

0 голосов
/ 05 сентября 2008

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

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

...