Отключить кнопку при отправке формы, но сообщение значение кнопки

Question

Я хочу предотвратить несколько представлений форм, но мне нужно, чтобы значение элемента отправки было отправлено обратно на сервер (чтобы я знал, на какую кнопку нажал пользователь).

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

Я нашел несколько примеров кода JS, который скрывает кнопку (ы) отправки, которая позволяет публиковать их значения. Но эти примеры заменяют кнопку (теперь скрытую) с каким-то сообщением «обработка ...». Я действительно хочу решение, которое представляет пользователю отключенную кнопку, но все равно отправляет значение кнопки.

Я должен добавить, что я бы предпочел решение, которое работает со стандартным HTML, которое можно найти в большинстве форм. Никаких магических IFrames, скрытых полей, имен идентификаторов или классов и т. Д. Я хочу, чтобы функция JS могла скрываться в библиотеке и ссылаться на все мои существующие формы, чтобы включить это новое поведение.

(у меня есть решение, которое я буду размещать в качестве ответа. Но я должен был задать вопрос соблюдать дзен SO.)

Answer 1

Здесь (еще один) ответ на вопрос о том, как чтобы не допустить, чтобы пользователь нажал кнопку отправки формы несколько раз. Это решение означает, что кнопка была отключена.

Под обложками он создает отключенную кнопку для отображения пользователю и скрывает фактическую кнопку, чтобы ее значение было опубликовано. Я также перемещаю скрытую кнопку, чтобы дополнительный элемент не испортил селекторов CSS.

Также обратите внимание на проверку недействительных полей формы. Если вы пропустили эту проверку и завершили проверку формы, пользователь отключится с формой, которая не была отправлена ​​(поскольку проверка на стороне клиента не удалась), но кнопки отключены.

// Disables buttons when form is submitted 
$('form').submit(function() { 
    // Bail out if the form contains validation errors 
    if ($.validator && !$(this).valid()) return; 

    var form = $(this); 
    $(this).find('input[type="submit"], button[type="submit"]').each(function (index) { 
     // Create a disabled clone of the submit button 
     $(this).clone(false).removeAttr('id').prop('disabled', true).insertBefore($(this)); 

     // Hide the actual submit button and move it to the beginning of the form 
     $(this).hide(); 
     form.prepend($(this)); 
    }); 
}); 

Answer 2

Вот пара вариантов:

1. Вы можете создать скрытые входы и динамически изменять значение его до того, как форма отправлена ​​либо OnClick или onHover указанной кнопки:

2. Вы можете создать скрытый iframe, который является целью указанной формы. После нажатия кнопки «Отправить» вы можете отменить событие отправки, захватить все данные и отправить его программно через iframe.

Answer 3

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

$('form').on('submit', function(e) { 
    if (!$(this).data('submitted')) { 
     $(this).data('submitted', true); 
    } 
    else { 
     e.preventDefault(); 
    } 
}); 

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

$('form').on('submit', function(e) { 
    if (!$(this).data('submitted')) { 
     $(this).data('submitted', true).addClass('disabled'); 
    } 
    else { 
     e.preventDefault(); 
    } 
}); 

Answer 4

Вы можете моделировать поведение отключенного вида. Например.если у вас есть кнопка, как это:

<input id="btn" type="button" onclick="disableMe(this)" value="Submit" /> 

Вы можете определить CSS, как этот

.disabled { 
    backround-color:grey; 
    color:darkgrey; 
} 

И JS как это

function disableMe(btn) { 
    btn.className = "disabled"; 
    btn.onclick = function(){return false} 
} 

Что будет - на первой кнопке мыши станет серым (через применяемый CSS), а событие onclick изменится на «return false» для всех последовательных вызовов, предотвращающих действия в будущем клике. Кнопка появится и будет действовать как отключенная, но ее не будет, поэтому она не будет препятствовать отправке кнопок.

Answer 5

Я хотел остановить пользователя от нескольких представлений форм, дважды нажав кнопку отправки или дважды нажав клавишу ввода. Мне нравится это решение, потому что оно не требует скрытого поля формы или скрывает кнопку отправки.

Две ключевые точки:

1. Возвращение истина/ложь вместо использования e.preventDefault() и form.submit(), потому что form.submit() не знает, какая кнопка была нажата и поэтому не может передать имя/значение кнопки.

2. Отключить кнопку pointer-events: none; вместо disabled="disabled", так как отключенный атрибут не отправит имя/значение кнопки. Я считаю, что pointer-events: none; не поддерживается Internet Explorer 10 или ниже.

Javascript код/​​JQuery:

var form_selector = 'form', 
    button_selector = 'button, input[type=submit], input[type=button], input[type=reset]', 
    deactivated_classname = 'state-submitting', 
    deactivated_class = '.'+'state-submitting'; 

// Capture the submit event so it will handle both the 
// enter key and clicking the submit button. 
$(document).on('submit', form_selector, function(e) { 
    var form = e.target, 
     buttons = $(form).find(button_selector); 

    // Returns, because the form is already being submitted by a previous attempt. 
    if($(form).find(deactivated_class).length > 0 ) return false; 

    disableButtons(buttons); 

    // Safari (version 11) bugfix: Safari needs a timeout or it won't 
    // show the deactivated styles. 
    setTimeout(function() { 
    // Must use return true, because using form.submit(), won't pass the button value. 
    return true; 
    }, 50); 
}); 

function disableButtons(buttons) { 
    // Disables all buttons in the form. 
    $(buttons).each(function(index, elem) { 
    $(elem).addClass(deactivated_classname); 
    }); 
} 

Для AJAX форм, вам нужно будет повторно активировать кнопки после того, как ответ возвращается.

$(document).on('ajax:complete', form_selector, function(e) { 
    var form = e.target, 
     buttons = $(form).find(button_selector); 

    enableButtons(buttons); 
}); 

function enableButtons(buttons) { 
    $(buttons).each(function(index, elem) { 
    $(elem).removeClass(deactivated_classname); 
    }); 
} 

CSS:

// The button is disabled while it is submitting. 
.state-submitting { 
    // Turns off hover and click events. Not supported in IE 10 and below. 
    pointer-events: none; 
    opacity: 0.5; 
}