Лучший способ предотвратить двойную отправку формы с текстовыми областями

Question

У меня есть форма с текстовой областью.Некоторые люди дважды щелкают по кнопке отправки, и даже после того, как я отправляю сообщение типа «пожалуйста, подождите» после отправки, некоторым все равно удается выполнить двойную отправку.

Проблема с текстовыми областямив том, что я не могу сделать этот столбец уникальным в базе данных, поэтому мой вопрос - как я могу убедиться, что эти формы не отправляются в БД дважды.

И даже если они попадают в БДиногда, как я могу предотвратить их отображение?Может быть, лестница - лучший вариант?

Спасибо!

Answer 1

Используйте скрытое поле, содержащее уникальный идентификатор.

И даже если они иногда попадают в БД

Если вы сохраните уникальный идентификатор в базе данных и добавите в этот столбец «УНИКАЛЬНЫЙ ИНДЕКС», то в первую очередь они не попадут в базу данных.

Answer 2

для решения пользовательского интерфейса с jQuery используйте что-то вроде

$("#foo").one("click", function() {
  console.log("This will be displayed only once.");
});

см. .one ()

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

Answer 3

отключить кнопку отправки после первого клика.

например, если вы используете jQuery, вы можете получить что-то вроде этого:

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

Answer 4

Вы можете использовать немного JavaScript ...

var submitted = false;
document.querySelector('form').addEventListener('submit', function(event) {
    if (submitted) {
        event.preventDefault();
    }
    submitted = true;
    this.querySelector('input[type="submit"]').disabled = true;

}, false);

jsFiddle .

(конечно, проверьте совместимость этих методов).*

Если вы используете jQuery ...

var submitted = false;
$('form').submit(function(event) {
    if (submitted) {
        event.preventDefault();
    }

    submitted = true;
    $(this).find(':submit').prop('disabled', true);

});

jsFiddle .