Используя jQuery для предотвращения повторно отправляющей формы

Question

Используя jQuery для предотвращения повторно отправляющей формы

Я использую .submit jQuery () для прерывания пользователя, отправляют событие, однако я нашел проблему.

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

Каково решение для этого вида проблемы?

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

5

jquery html form-submit

задан Sawyer 14 May 2010 в 02:49

4 ответа

Отключить кнопку «Отправить» в функции jQuery.

http://jquery-howto.blogspot.com/2009/05/disable-submit-button-on-form-submit.html

2

ответ дан 13 December 2019 в 22:03

попробуйте отключить кнопку submit на форме submit....

$("form").submit(function() {
    $(':submit',this).attr('disabled','disabled');
    $('selector').load(url,function(){
       $(':submit',this).removeAttr('disabled');
    })
});

quick demo

1

ответ дан 13 December 2019 в 22:03

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

Когда вы изначально визуализируете страницу, вы можете создать GUID. Скажем, идентификатор операции. и поместите его в состояние просмотра. Когда вы обрабатываете событие на стороне сервера, просто вставьте этот идентификатор в таблицу, скажем, OngoingOperations, где это первичный ключ. Первая вставка будет успешной, другая - неудачной. Разумеется, для большего удобства вы можете просто пропустить последующие операции и вернуть статус первой.

Таблица OngoingOperations может выглядеть следующим образом:

СОЗДАТЬ ТАБЛИЦУ OngoingOperations ( Первичный ключ уникального идентификатора OperationID, OperationDate datetime по умолчанию getdate (), OperationStatus nvarchar (макс.) );

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

эта таблица требует сбора старых записей, скажем, каждый час вы просто удаляете операции, которые были завершены 2 или более часов назад.

Антон Бурцев

0

ответ дан 13 December 2019 в 22:03

Другие вопросы по тегам:

jquery html form-submit

Похожие вопросы:

score 7 · Accepted Answer

Отключение кнопки отправки действительно правильный путь.

Однако во многих случаях выполняемая логика на стороне сервера зависит от наличия пары имя-значение соответствующей кнопки отправки в карте параметров запроса. Особенно в средах MVC на основе серверных компонентов, таких как MS ASP.NET и Sun JSF, но также и в «простых» формах, имеющих более одной кнопки отправки. Пара имя-значение нажатой кнопки отправки является обязательной для определения выполняемого действия.Отключение кнопки приведет к тому, что ее пара «имя-значение» полностью исчезнет в карте параметров запроса, и сторона сервера может не предпринять никаких действий или выполнить неправильное действие.

Есть два основных способа обойти это:

Используйте setTimeout () , чтобы отключить кнопку через несколько миллисекунд, чтобы ее пара имя-значение все равно была отправлена. 50 мс - доступная сумма.
```
 $ ("форма"). Submit (function () {
var form = this;
setTimeout (function () {
 $ (': отправить', форма) .attr ('отключено', истина);
 }, 50);
});
```
Скопируйте пару имя-значение фактически нажатой кнопки отправки в скрытый ввод формы. Это немного сложнее, поскольку эта информация недоступна в событии submit в
. Вам нужно разрешить $ (document) захватить последний выбранный элемент.
```
 $ ("форма"). Submit (function () {
 $ (': отправить', это) .attr ('отключено', истина);
 $ (this) .append ($ (''). attr ({
тип: 'скрытый',
имя: $ .lastClicked.name,
значение: $ .lastClicked.value
 }));
});

$ (документ) .click (function (e) {
е = е || мероприятие;
 $ .lastClicked = e.target || e.srcElement;
});
```

Обновление : в соответствии с вашим обновлением:

Что ж, я вижу некоторые советы, в которых говорилось об отключении кнопки отправки. Это должно помешать отправке несколько раз, но проблема в том, что элемент формы на моей странице не обновляется, если я отключу его, пользователь больше не сможет отправить его, отключение его на 15 секунд может сработать, но это правильный способ решить эту проблему?

Итак, вы фактически запускаете аяксический запрос.Вы можете просто повторно включить кнопки в обработчике обратного вызова функции jQuery ajax. Предполагая, что вы используете jQuery.post :

$("form").submit(function() {
    // Disable buttons here whatever way you want.

    var form = this;
    $.post('some/url', function(data) {
        // Re-enable buttons at end of the callback handler.
        $(':submit', form).attr('disabled', false);
    });
});