Посмотрите на этот пример:
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:
Вы можете предотвратить несколько отправки просто с помощью:
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;
});
Это работает отлично для меня. Он передает ферму и отключает кнопку и через 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);}
С помощью JQuery вы можете сделать:
$('input:submit').click( function() { this.disabled = true } );
& amp;
$('input:submit').keypress( function(e) {
if (e.which == 13) {
this.disabled = true
}
}
);
<form onsubmit="if(submitted) return false; submitted = true; return true">
Наиболее простые решения - это отключение кнопки при нажатии, включение ее после завершения операции. Чтобы проверить подобное решение на jsfiddle:
[click here][1]
И вы можете найти другое решение в этом ответе .
Вот простой способ сделать это:
<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>
Самый простой ответ на этот вопрос: «Иногда, когда ответ идет медленно, можно несколько раз нажать кнопку отправки. Как предотвратить это?»
Просто отключите форму submit , как показано ниже.
<form ... onsubmit="buttonName.disabled=true; return true;">
<input type="submit" name="buttonName" value="Submit">
</form>
Откроется кнопка отправки при первом щелчке для отправки. Также, если у вас есть некоторые правила валидации, тогда он будет работать нормально. Надеюсь, это поможет.
Используйте этот код в вашем form.it будет обрабатывать несколько кликов.
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
он будет работать точно.
Сбросить текущее время, сделать его скрытым входом. На стороне сервера проверьте хэш каждого представления формы; если вы уже получили этот хеш, то у вас есть повторная подача.
edit: полагаться на javascript - это не очень хорошая идея, поэтому вы все можете поддерживать эти идеи, но некоторые пользователи не будут иметь он включен. Правильный ответ - не доверять пользовательскому вводу на стороне сервера.
Я попробовал решение vanstee вместе с ненавязчивой проверкой asp mvc 3, и если проверка клиента не удалась, код все еще запущен, а форма submit отключена навсегда. Я не могу повторно отправить после исправления полей. (см. комментарий Бяна)
Итак, я модифицировал скрипт vanstee следующим образом:
$("form").submit(function () {
if ($(this).valid()) {
$(this).submit(function () {
return false;
});
return true;
}
else {
return false;
}
});
Вы можете попробовать 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;
}
})
Я знаю, что вы отметили свой вопрос с помощью «javascript», но вот решение, которое совсем не зависит от javascript:
Это шаблон webapp с именем PRG, и вот хорошая статья , который описывает его
Сделать это с помощью 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>
Управление представлением формы на стороне клиента может быть достигнуто довольно элегантно, если обработчик onsubmit скрывает кнопку отправки и заменяет ее загружаемой анимацией. Таким образом, пользователь получает немедленную визуальную обратную связь в том же месте, где произошло его действие (щелчок). В то же время вы запрещаете отправку формы в другой раз.
Если вы отправляете форму через XHR, имейте в виду, что вам также приходится обрабатывать ошибки отправки, например тайм-аут. Вам нужно будет снова отобразить кнопку отправки, потому что пользователю необходимо повторно отправить форму.
В другой заметке llimllib вызывает очень действительную точку. Вся проверка формы должна выполняться на стороне сервера. Это включает в себя несколько проверок подачи. Никогда не доверяйте клиенту! Это не только случай, если javascript отключен. Вы должны иметь в виду, что все клиентские коды могут быть изменены. Довольно сложно представить, но html / javascript, разговаривающий с вашим сервером, не обязательно является html / javascript, который вы написали.
Как предлагает llimllib, сгенерируйте форму с уникальным для этой формы идентификатором и поместите его в скрытое поле ввода. Сохраните этот идентификатор. При получении данных формы обрабатывайте его только тогда, когда идентификатор совпадает. (Также связывание идентификатора с сеансом пользователя и его соответствие также для дополнительной безопасности.) После обработки данных удалите идентификатор.
Конечно, время от времени вам нужно будет очистить чтобы идентификаторы, для которых никогда не были представлены данные формы. Но, скорее всего, ваш сайт уже использует какой-то механизм «сборки мусора».
Просто чтобы добавить к возможным ответам без обхода проверки входа в браузер
$( document ).ready(function() {
$('.btn-submit').on('click', function() {
if(this.form.checkValidity()) {
$(this).attr("disabled", "disabled");
$(this).val("Submitting...");
this.form.submit();
}
});
});
Отключить кнопку отправки сразу после щелчка. Убедитесь, что вы правильно обрабатываете проверки. Также сохраняйте промежуточную страницу для всех операций обработки или БД, а затем перенаправляйте на следующую страницу. Это гарантирует, что обновление второй страницы не приведет к другой обработке.
Самое простое и элегантное решение для мужчин:
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>
На стороне клиента вы должны отключить кнопку отправки, как только форма будет отправлена с кодом JavaScript, как метод, предоставленный @vanstee и @chaos.
Но есть проблема для сетевого отставания или javascript-отключена ситуация, когда вы не должны полагаться на JS, чтобы это не происходило.
Итак, на стороне сервера вы должны проверить повторную отправку с одних и тех же клиентов и опустить повторную, которая кажется ложной попыткой пользователя.
Вы также можете отобразить индикатор выполнения или счетчик, чтобы указать, что форма обрабатывается.
Используйте ненавязчивый javascript, чтобы отключить событие отправки в форме после того, как она уже была отправлена. Вот пример использования jQuery.
EDIT: Исправлена проблема с отправкой формы без нажатия кнопки отправки. Спасибо, ichiban.
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
лучший способ предотвратить множественность от отправки - это просто передать идентификатор кнопки в методе.
function DisableButton() {
document.getElementById("btnPostJob").disabled = true;
}
window.onbeforeunload = DisableButton;