Ответ 1
Попробуйте следующее:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
Я знаю, что в этом есть много вопросов, но я попробовал несколько решений, и ничего не работает.
В моем приложении django у меня есть форма:
<form method='post'>
<button type='submit'>Send</button>
</form>
Я не могу отключить кнопку, как только пользователь отправит форму. Используя другие вопросы, я попробовал несколько вещей, например:
<button type='submit' onclick="this.disabled=true">Send</button>
Когда я нажимаю, кнопка отключена... но форма не отправляется. И для каждой попытки у меня была такая же проблема: либо кнопка отключена, либо форма отправлена. Я не могу найти, как сделать оба...
Я использую Chrome. Любая идея о том, почему у меня есть эта проблема? Благодарим вас за помощь.
Попробуйте следующее:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
Мне нравится это, не нужно пересекать DOM. Поместите функцию в функцию setTimeout, это позволяет выполнять отправку и после отключения кнопки, даже если setTimeout равен 0
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
Вы можете отключить его в родительской форме submit
event:
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
Обязательно запустите этот код только после того, как был загружен HTMLFormElement
, иначе он не будет привязан к нему. Чтобы убедиться, что привязка имеет место, выключите это из блока document-ready
:
// When the document is ready, call setup
$(document).ready(setup);
function setup () {
$("form").on("submit", function () {
$(this).find(":submit").prop("disabled", true);
});
}
Попробуйте, например,
<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">
Что-то вроде этого может работать.
<button id="btnSubmit" type='submit'> Send </button>
<script>
$("#btnSubmit").on("click", function(e){
e.PreventDefault();
$(this).closest("form")[0].submit();
$(this).prop('disabled',true)
});
</script>
Как насчет этого?
onclick="this.style.visibility='hidden';"
Я бы сказал, вместо отключенного, скрыть его.
Если вы хотите пойти с disabled
onclick="this.style.disabled='true';"
мой вариант, кнопка отключения, без прямого отключения, но только скрытая скрытая:
<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>
Мне нравится это лучше:
<script>
var submit = false;
$('form').submit(function () {
if (submit) { return false; }
else { submit = true;}
});
</script>
таким образом он также предотвращает отправку ключа ввода более одного раза
Я использую Chrome. Любая идея о том, почему у меня есть эта проблема?
Хорошо, в первый раз, когда я справился с этим, я решил это следующим образом:
function blockButtons() {
$('button:submit').click(function(){
$('button:submit').attr("disabled", true);
});
}
Это сработало отлично, но... в Mozilla Firefox. Google Chrome не отправил его, поэтому я изменил его на следующее:
function blockButtons() {
$('button:submit').click(function(){
var form = $(this).parents('form:first');
$('button:submit').attr("disabled", true);
$('button:submit').css('opacity', 0.5);
form.submit();
});
}
Это работало как в Mozilla Firefox, однако, после этого некоторые из наших пользователей, использующих старые версии IE, столкнулись с проблемой наличия двух сообщений. То есть, инициированный javascript, а другой браузер игнорирует факт onclick и просто отправляет в любом случае. Это может быть исправлено с помощью e.preventDefault, я думаю.
Если вы не хотите, чтобы элемент был двойным щелчком, используйте .one()
<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
});
});
У вас возникла проблема с Chrome, он не отправил форму. Пробовал кучу разного кода, это было то, что работало лучше всего для меня (и выглядит лучше всего imo):
$('#form_id').submit(function() {
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
Замените form_id на идентификатор вашей формы. Конечно, занятия тоже работают: $('.form_class')
Источник: Кодировщик JavaScript
Вы можете сделать что-то подобное. Это хорошо работает со мной.
<form method='post' onSubmit='disableFunction()'>
// your code here
</form>
Затем в script добавьте это
<script>
function disableFunction() {
$('#btn_submit').prop('disabled', true);
}
</script>
Вы можете сделать что-то вроде этого. Это хорошо работает со мной.
$("button#submitted").click(function () {
$("button#submitted").prop('disabled', true);
});
Двойной щелчок по вашей кнопке. Этот код будет запущен
Вы должны запретить отправку формы более одного раза, поскольку отключение кнопки не является правильным решением, поскольку форму можно отправить другими способами.
JavaScript:
$('form').submit(function(e) {
// if the form is disabled don't allow submit
if ($(this).hasClass('disabled')) {
e.preventDefault();
return;
}
$(this).addClass('disabled');
});
Как только форма правильно отключена, вы можете настроить ее внешний вид.
CSS:
form.disabled {
pointer-events: none;
opacity: 0.7;
}