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

Ответ 1

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

Ответ 2

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

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

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

Ответ 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 будет выглядеть очень похоже.

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

если вы используете форму submit/post в 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" />

Ответ 8

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

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

Ответ 9

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

<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
});

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

Ответ 10

Одно из решений состоит в том, чтобы не использовать <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();
}