Как отправить форму только один раз после многократного нажатия на кнопку Отправить?

Question

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

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

Answer 1

Отключение кнопки является одним из решений, но потенциально представляет проблему для пользователей клавиатуры, которые просто нажимают клавишу ввода, чтобы отправить форму. В этом случае кнопка не будет отключена. Безошибочный метод будет обрабатывать событие onsubmit следующим образом:

(function () {
    var allowSubmit = true;
    frm.onsubmit = function () {
       if (allowSubmit)
           allowSubmit = false;
       else 
           return false;
    }
})();

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

Answer 2

<input type="submit" onclick="this.disabled = true" value="Save"/>

Answer 3

Мне нравится простота и прямота Ответ Зойдберга .

Но если вы хотите подключить этот обработчик, используя код, а не разметку (некоторые люди предпочитают хранить разметку и код полностью разделенными), здесь используется Prototype :

document.observe('dom:loaded', pageLoad);
function pageLoad() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', disableOnClick);
}
function disableOnClick() {
    this.disabled = true;
}

или вы можете использовать анонимные функции (я не фанат их):

document.observe('dom:loaded', function() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', function() {
        this.disabled = true;
    });
});

Выполнение этого с помощью jQuery будет выглядеть очень похоже.

Answer 4

Если вы используете Rails с ujs, взгляните на disable_with in http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag

Answer 5

в хроме используйте это:

<input type="submit" onclick="this.form.submit();this.disabled = true;" value="Save"/>

Answer 6

Одно из решений состоит в том, чтобы не использовать <input> в качестве кнопки отправки, а вместо этого <div> (или <span>) в виде кнопки с атрибутом onclick:

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick="submitOnce()">
    Submit
  </div>
</form>

И функция submitOnce сначала удалит атрибут onclick, а затем отправит форму:

function submitOnce() {
  document.getElementById('submit-button').removeAttribute('onclick');
  document.getElementById('my-form').submit();
}

Answer 7

Вы можете добавить следующий скрипт на свою «страницу макета» (которая будет отображаться на всех страницах по всему миру).

<script type="text/javascript">
    $(document).ready(function () {
        $(':submit').removeAttr('disabled'); //re-enable on document ready
    });
    $('form').submit(function () {
        $(':submit').attr('disabled', 'disabled'); //disable on any form submit
    });
</script>

Затем при каждой отправке формы кнопки отправки отключаются. (Кнопки отправки повторно активируются при загрузке страницы.)

Если вы используете платформу валидации (например, jQuery Validation), вероятно, вам необходимо повторно включить кнопку (кнопки) отправки, если валидация также не удалась. (потому что ошибка проверки формы приводит к отмене отправки).

Если вы используете jQuery Validation, вы можете обнаружить аннулирование формы (отмена отправки формы), добавив следующее:

$('form').bind('invalid-form.validate', function () {
    $(':submit').removeAttr('disabled'); //re-enable on form invalidation
});

Затем, если проверка формы завершится неудачно, кнопка (и) отправки снова / снова будет активирована.

Answer 8

Лучший способ найти это, чтобы работать лучше всего, если вся информация в форме верна, затем добавить атрибут к кнопке отправки.Incase пользователь должен вернуться и заполнить форму еще раз с правильной информацией.

document.querySelector('.btn').addEventListener('submit',function(){
    if(input.value){
        this.setAttribute("disabled", "true")
    }
};

Answer 9

если вы используете форму отправки / публикации в PHP, используйте этот код

onclick="disableMe();" in type="submit" 

код кнопки отправки

<input name="bt2" type="submit" onclick="disableMe();" id="bt2" style="width:50px;height:30px; margin-left:30px;" value="Select" />

Answer 10

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

<input type="submit" onclick="this.style.visibility = 'hidden'" value="Save"/>