2008-09-05 4 views
9

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

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

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

ответ

11

Для всех кнопок отправки, с помощью JQuery , было бы:

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

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

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

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

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

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

1

в JQuery:

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

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

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

4

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

Мой подход состоял в том, чтобы просто скрыть кнопку целиком и отобразить вместо этого индикатор состояния (анимированный 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> 
+0

+1 был полезен, так как мне нужно значение кнопки отправки, отправленное в запросе. Отключение кнопки означает, что значение не опубликовано. – ajbeaven 2011-12-23 03:51:34

0

Как насчет

код за:

btnContinue3. Атрибуты.Пункт («OnClick») = «disableSubmit()»

Javascript:

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

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

1

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

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

8

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

$('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" />
  • это очень короткий.
Смежные вопросы