Я написал этот код, чтобы отключить кнопки отправки на моем сайте после нажатия:
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
К сожалению, он не отправляет форму. Как я могу это исправить?
ИЗМЕНИТЬ Я хотел бы привязать submit, а не форму:)
Сделайте это onSubmit():
$('form#id').submit(function(){
$(this).find(':input[type=submit]').prop('disabled', true);
});
Что происходит, так это то, что вы полностью отключили кнопку, прежде чем она инициирует событие отправки.
Вероятно, вам также следует подумать об именах ваших элементов с идентификаторами или CLASS, поэтому вы не выбираете все входы типа отправки на странице.
Демонстрация: http://jsfiddle.net/userdude/2hgnZ/
(Обратите внимание: я использую preventDefault() и return false, поэтому форма не является фактической отправкой в примере, оставьте это в своем использовании.)
В частности, если кто-то сталкивается с проблемой в Chrome :
Чтобы это исправить, нужно использовать тег onSubmit в элементе <form> чтобы disabled кнопку отправки. Это позволит Chrome отключить кнопку сразу после ее нажатия, и отправка формы будет продолжена...
<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
Отключенные элементы управления не отправляют свои значения, что не помогает узнать, нажал ли пользователь сохранить или удалить.
Таким образом, я сохраняю значение кнопки в скрытом, которое отправляется. Имя скрытого файла совпадает с именем кнопки. Я вызываю все мои кнопки по имени button.
например. <button type="submit" name="button" value="save">Save</button>
Основываясь на этом, я нашел здесь. Просто сохраните нажатую кнопку в переменной.
$(document).ready(function(){
var submitButton$;
$(document).on('click', ":submit", function (e)
{
// you may choose to remove disabled from all buttons first here.
submitButton$ = $(this);
});
$(document).on('submit', "form", function(e)
{
var form$ = $(this);
var hiddenButton$ = $('#button', form$);
if (IsNull(hiddenButton$))
{
// add the hidden to the form as needed
hiddenButton$ = $('<input>')
.attr({ type: 'hidden', id: 'button', name: 'button' })
.appendTo(form$);
}
hiddenButton$.attr('value', submitButton$.attr('value'));
submitButton$.attr("disabled", "disabled");
}
});
Вот моя функция IsNull. Используйте или замените свою собственную версию для IsNull или undefined и т.д.
function IsNull(obj)
{
var is;
if (obj instanceof jQuery)
is = obj.length <= 0;
else
is = obj === null || typeof obj === 'undefined' || obj == "";
return is;
}
Это должно позаботиться об этом в вашем приложении.
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});
Простое и эффективное решение
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
Источник: здесь
Более простой способ. Я попробовал это, и это работало нормально для меня:
$(':input[type=submit]').prop('disabled', true);
Ваш код действительно работает на FF, он не работает в Chrome.
Это работает на FF и Chrome.
$(document).ready(function() {
// Solution for disabling the submit temporarily for all the submit buttons.
// Avoids double form submit.
// Doing it directly on the submit click made the form not to submit in Chrome.
// This works in FF and Chrome.
$('form').on('submit', function(e){
//console.log('submit2', e, $(this).find('[clicked=true]'));
var submit = $(this).find('[clicked=true]')[0];
if (!submit.hasAttribute('disabled'))
{
submit.setAttribute('disabled', true);
setTimeout(function(){
submit.removeAttribute('disabled');
}, 1000);
}
submit.removeAttribute('clicked');
e.preventDefault();
});
$('[type=submit]').on('click touchstart', function(){
this.setAttribute('clicked', true);
});
});
</script>
Как отключить кнопку отправки
просто вызовите функцию onclick event и... возвращайте true для отправки и false, чтобы отключить отправку. ИЛИ вызовите функцию на window.onload, например:
window.onload = init();
и в init() сделать что-то вроде этого:
var theForm = document.getElementById(‘theForm’);
theForm.onsubmit = // what ever you want to do
У меня сработало следующее:
var form_enabled = true;
$().ready(function(){
// allow the user to submit the form only once each time the page loads
$('#form_id').on('submit', function(){
if (form_enabled) {
form_enabled = false;
return true;
}
return false;
});
});
Это отменяет событие отправки, если пользователь пытается отправить форму несколько раз (нажав кнопку отправки, нажав Enter и т.д.)
Я использовал blockUI, чтобы избежать несовместимости браузера с отключенными или скрытыми кнопками.
http://malsup.com/jquery/block/#element
Тогда у моих кнопок есть класс автоподключения:
$(".autobutton").click(
function(event) {
var nv = $(this).html();
var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
$(this).html(nv2);
var form = $(this).parents('form:first');
$(this).block({ message: null });
form.submit();
});
Тогда форма такая:
<form>
....
<button class="autobutton">Submit</button>
</form>
Код кнопки
<button id="submit" name="submit" type="submit" value="Submit">Submit</button>
Кнопка отключения
if(When You Disable the button this Case){
$(':input[type="submit"]').prop('disabled', true);
}else{
$(':input[type="submit"]').prop('disabled', false);
}
Примечание. В этом случае ваш случай может быть несколько
Как уже говорилось, если вы добавите отключенный атрибут на кнопку отправки, данные не будут отправлены.
Трюк от @Valamas работает, но я нашел решение, которое очень легко реализовать:
$('#yourform').submit(function(){
$('#mySubmitButton').addClass('disabled');
});
И вы определяете отключенный класс в CSS следующим образом:
.disabled{
cursor:not-allowed;
}
Это сделает то же самое, что отключено = "отключено", но без последствий для отправленных данных.