Отключить кнопку отправить в форме отправить
Я написал этот код, чтобы отключить кнопку Submit На моем сайте после клика:
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
к сожалению, он не отправляет форму. Как я могу это исправить?
EDIT Я бы хотел привязать submit, а не форму:)
11 ответов:
сделать
onSubmit()
:$('form#id').submit(function(){ $(this).find(':input[type=submit]').prop('disabled', true); });
что происходит, вы полностью отключаете кнопку, прежде чем она фактически запускает событие отправки.
вы, вероятно, также должны подумать об именовании своих элементов идентификаторами или классами, поэтому вы не выбираете все входные данные типа submit На странице.
демонстрация: http://jsfiddle.net/userdude/2hgnZ/
(обратите внимание, я использую
preventDefault()
иreturn false
Так что форма не фактическое отправить в Примере; оставьте это в вашем использовании.)
в частности, если кто-то сталкивается с проблемой хром
что вам нужно сделать, чтобы исправить это, чтобы использовать тег onSubmit в элементе, чтобы установить кнопку отправки отключена. Это позволит 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"); } });
здесь мой
Это должно заботиться о нем в ваше приложение.
$(":submit").closest("form").submit(function(){ $(':submit').attr('disabled', 'disabled'); });
простое и эффективное решение-это
<form ... onsubmit="myButton.disabled = true; return true;"> ... <input type="submit" name="myButton" value="Submit"> </form>
источник: здесь
ваш код на самом деле работает на 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 и... возвращает true для отправки и false для отключения отправки. или вызов функции в окне.события onload, как :
window.onload = init();
и в init() сделать что-то вроде этого :
var theForm = document.getElementById(‘theForm’); theForm.onsubmit = // what ever you want to do
как было сказано ранее, если вы добавите атрибут disabled на кнопку submit, данные не будут отправлены.
трюк от @Valamas работает, но я нашел решение, которое очень легко реализовать:
$('#yourform').submit(function(){ $('#mySubmitButton').addClass('disabled'); });
и вы определяете отключенный класс в CSS следующим образом:
.disabled{ cursor:not-allowed; }
это будет делать то же самое, что и disabled="disabled", но без последствий для отправленных данных.
для меня сработало следующее:
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:
$(".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>