Как определить, отправил ли пользователь форму более одного раза? [Дубликат]

Посмотрите на этот пример:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

    var getJoke = function(){
        return $http.get('http://api.icndb.com/jokes/random').then(function(res){
            return res.data.value;  
        });
    }

    getJoke().then(function(res) {
        console.log(res.joke);
    });
});

Как вы можете видеть, getJoke возвращает разрешенное обещание (оно разрешено при возврате res.data.value). Таким образом, вы ждете, пока запрос $ http.get не будет завершен, а затем выполнится console.log (res.joke) (как обычный асинхронный поток).

Это plnkr:

http://embed.plnkr.co/XlNR7HpCaIhJxskMJfSg/

80
задан Dan Homola 6 August 2014 в 14:16
поделиться

21 ответ

Вы можете предотвратить несколько отправки просто с помощью:

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;

});
4
ответ дан Alpha 23 August 2018 в 20:50
поделиться

Это работает отлично для меня. Он передает ферму и отключает кнопку и через 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);}
0
ответ дан Awais Jameel 23 August 2018 в 20:50
поделиться

С помощью JQuery вы можете сделать:

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

& amp;

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );
5
ответ дан Boris Guéry 23 August 2018 в 20:50
поделиться
<form onsubmit="if(submitted) return false; submitted = true; return true">
10
ответ дан chaos 23 August 2018 в 20:50
поделиться

Наиболее простые решения - это отключение кнопки при нажатии, включение ее после завершения операции. Чтобы проверить подобное решение на jsfiddle:

[click here][1]

И вы можете найти другое решение в этом ответе .

0
ответ дан Community 23 August 2018 в 20:50
поделиться

Вот простой способ сделать это:

<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>
13
ответ дан ichiban 23 August 2018 в 20:50
поделиться

Самый простой ответ на этот вопрос: «Иногда, когда ответ идет медленно, можно несколько раз нажать кнопку отправки. Как предотвратить это?»

Просто отключите форму submit , как показано ниже.

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

Откроется кнопка отправки при первом щелчке для отправки. Также, если у вас есть некоторые правила валидации, тогда он будет работать нормально. Надеюсь, это поможет.

3
ответ дан Imran Khan 23 August 2018 в 20:50
поделиться

Используйте этот код в вашем form.it будет обрабатывать несколько кликов.

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

он будет работать точно.

0
ответ дан Kalamarico 23 August 2018 в 20:50
поделиться

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

edit: полагаться на javascript - это не очень хорошая идея, поэтому вы все можете поддерживать эти идеи, но некоторые пользователи не будут иметь он включен. Правильный ответ - не доверять пользовательскому вводу на стороне сервера.

5
ответ дан llimllib 23 August 2018 в 20:50
поделиться

Я попробовал решение vanstee вместе с ненавязчивой проверкой asp mvc 3, и если проверка клиента не удалась, код все еще запущен, а форма submit отключена навсегда. Я не могу повторно отправить после исправления полей. (см. комментарий Бяна)

Итак, я модифицировал скрипт vanstee следующим образом:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});
35
ответ дан Martin 23 August 2018 в 20:50
поделиться

Вы можете попробовать 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;
    }
})
3
ответ дан Maxim Kamenkov 23 August 2018 в 20:50
поделиться

Я знаю, что вы отметили свой вопрос с помощью «javascript», но вот решение, которое совсем не зависит от javascript:

Это шаблон webapp с именем PRG, и вот хорошая статья , который описывает его

4
ответ дан Pablo Fernandez 23 August 2018 в 20:50
поделиться

Сделать это с помощью 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>

0
ответ дан Rish 23 August 2018 в 20:50
поделиться

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

Если вы отправляете форму через XHR, имейте в виду, что вам также приходится обрабатывать ошибки отправки, например тайм-аут. Вам нужно будет снова отобразить кнопку отправки, потому что пользователю необходимо повторно отправить форму.

В другой заметке llimllib вызывает очень действительную точку. Вся проверка формы должна выполняться на стороне сервера. Это включает в себя несколько проверок подачи. Никогда не доверяйте клиенту! Это не только случай, если javascript отключен. Вы должны иметь в виду, что все клиентские коды могут быть изменены. Довольно сложно представить, но html / javascript, разговаривающий с вашим сервером, не обязательно является html / javascript, который вы написали.

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

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

18
ответ дан Rob 23 August 2018 в 20:50
поделиться

Просто чтобы добавить к возможным ответам без обхода проверки входа в браузер

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});
0
ответ дан Roi 23 August 2018 в 20:50
поделиться

Отключить кнопку отправки сразу после щелчка. Убедитесь, что вы правильно обрабатываете проверки. Также сохраняйте промежуточную страницу для всех операций обработки или БД, а затем перенаправляйте на следующую страницу. Это гарантирует, что обновление второй страницы не приведет к другой обработке.

7
ответ дан Shoban 23 August 2018 в 20:50
поделиться

Самое простое и элегантное решение для мужчин:

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>

Ссылка для более ...

1
ответ дан Solis 23 August 2018 в 20:50
поделиться

На стороне клиента вы должны отключить кнопку отправки, как только форма будет отправлена ​​с кодом JavaScript, как метод, предоставленный @vanstee и @chaos.

Но есть проблема для сетевого отставания или javascript-отключена ситуация, когда вы не должны полагаться на JS, чтобы это не происходило.

Итак, на стороне сервера вы должны проверить повторную отправку с одних и тех же клиентов и опустить повторную, которая кажется ложной попыткой пользователя.

2
ответ дан steveyang 23 August 2018 в 20:50
поделиться

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

4
ответ дан Tony Borf 23 August 2018 в 20:50
поделиться

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

EDIT: Исправлена ​​проблема с отправкой формы без нажатия кнопки отправки. Спасибо, ichiban.

$("form").submit(function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});
88
ответ дан user 23 August 2018 в 20:50
поделиться

лучший способ предотвратить множественность от отправки - это просто передать идентификатор кнопки в методе.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 
0
ответ дан user2427182 23 August 2018 в 20:50
поделиться
Другие вопросы по тегам:

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