Як запобігти подачі форми кілька разів з боку клієнта?

Іноді, коли відповідь повільна, можна натиснути кнопку подати кілька разів.

Як запобігти цьому?

Використовуйте ненав’язливий javascript, щоб вимкнути подію подання у формі після того, як її вже було надіслано. Ось приклад використання jQuery.

РЕДАГУВАТИ: Виправлена ​​проблема з подачею форми без натискання кнопки надіслати. Дякую, Ічібан.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Я спробував рішення vanstee разом із ненав’язливою валідацією asp mvc 3, і якщо перевірка клієнта не вдається, код все одно запускається, а подання форми вимкнено назавжди. Я не можу повторно подати після виправлення полів. (див. коментар bjan)

Тож я змінив сценарій vanstee таким чином:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Клієнтський контроль над поданням форми може бути досягнутий досить елегантно, якщо обробник onsubmit приховає кнопку подання та замінить її анімацією завантаження. Таким чином користувач отримує негайний візуальний зворотний зв'язок у тому самому місці, де відбулася його дія (клік). У той же час ви заважаєте подавати форму іншим разом.

Якщо ви подаєте форму через XHR, майте на увазі, що вам також доведеться обробляти помилки, наприклад, час очікування. Вам довелося б знову відобразити кнопку надсилання, оскільки це потрібно для користувача повторно надіслати форму.

З іншого боку, llimllib піднімає цілком слушну думку. Вся перевірка форми повинна відбуватися на стороні сервера. Це включає кілька перевірок подання. Ніколи не довіряйте клієнту! Це не тільки випадок, якщо javascript відключений. Ви повинні пам’ятати, що весь код на стороні клієнта може бути змінений. Це дещо важко уявити, але розмова html / javascript із вашим сервером - це не обов'язково написаний вами html / javascript.

Як пропонує llimllib, згенеруйте форму з унікальним ідентифікатором для цієї форми та помістіть її у приховане поле введення. Зберігайте цей ідентифікатор. При отриманні даних форми обробляйте їх лише тоді, коли ідентифікатор збігається. (Також прив'язуючи ідентифікатор до сеансу користувачів і збігаючись з цим, також для додаткової безпеки.) Після обробки даних видаліть ідентифікатор.

Звичайно, час від часу вам потрібно буде очистити ідентифікатори, для яких ніколи не надходили дані форми. Але, швидше за все, на вашому веб-сайті вже працює якийсь механізм "вивезення сміття".

<form onsubmit="if(submitted) return false; submitted = true; return true">

Ось простий спосіб зробити це:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Вимкніть кнопку надсилання незабаром після клацання. Переконайтеся, що правильно обробляєте перевірки. Також зберігайте проміжну сторінку для всіх операцій обробки або БД, а потім перенаправляйте на наступну сторінку. Це гарантує, що оновлення другої сторінки не виконує іншої обробки.

Хеш поточного часу, зробіть це прихованим введенням у форму. На стороні сервера перевірте хеш кожної поданої форми; якщо ви вже отримали цей хеш, тоді у вас є повторне подання.

редагувати: покладатися на javascript - це не гарна ідея, тому ви всі можете продовжувати голосувати за ці ідеї, але у деяких користувачів це не буде ввімкнено. Правильна відповідь - не довіряти введенню користувача на стороні сервера.

Ви також можете відобразити індикатор виконання або дзигу, щоб вказати, що форма обробляється.

За допомогою JQuery ви можете зробити:

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

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Я знаю, що ви позначили своє запитання тегом "javascript", але ось рішення, яке взагалі не залежить від javascript:

Це шаблон веб- додатку під назвою PRG , і ось хороша стаття, яка його описує

Ви можете запобігти багаторазовому надсиланню просто за допомогою:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Найпростіша відповідь на це запитання: "Іноді, коли відповідь повільна, можна кілька разів натиснути кнопку" Надіслати ". Як запобігти цьому?"

Просто відключіть кнопку подання форми, як показано нижче.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Це вимкне кнопку подати, при першому натисканні для подання. Крім того, якщо у вас є деякі правила перевірки, це буде добре працювати. Сподіваюся, це допоможе.

На стороні клієнта слід відключити кнопку подати, як тільки форма буде подана з кодом javascript, як, наприклад, метод, наданий @vanstee та @chaos.

Але існує проблема із затримкою мережі або ситуацією, коли відключений javascript, коли вам не слід покладатися на JS, щоб цього не сталося.

Отже, на стороні сервера , ви повинні перевірити повторне надсилання від тих самих клієнтів і пропустити повторне, яке здається помилковою спробою користувача.

Ви можете спробувати плагін safeform jquery.

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

Найпростіше та елегантне рішення для мене:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Посилання на докладніше ...

Використовуйте цей код у формі. Він буде обробляти кілька кліків.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

це спрацює точно.

Це дозволяє подавати кожні 2 секунди. У разі передньої валідації.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

найкращий спосіб запобігти надходженню кількох - це просто передати ідентифікатор кнопки в методі.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Зробити це за допомогою JavaScript легко. Нижче наведено код, який надасть бажану функціональність:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

Найбільш простими рішеннями є вимкнення кнопки при натисканні, увімкнення після завершення операції. Щоб перевірити подібне рішення на jsfiddle:

[click here][1]

І ви можете знайти якесь інше рішення щодо цієї відповіді .

Для мене це дуже добре працює. Він подає ферму і робить кнопку вимкненою і через 2 секунди активує кнопку.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

У ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

Просто додати до можливих відповідей, не минаючи перевірку вводу браузера

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Альтернативою запропонованому раніше є:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});