Как запретить пользователям дважды отправлять форму

<input type="submit" name="btnADD" id="btnADD" value="ADD"/>

когда пользователь дважды нажимает кнопку "Добавить", начиная с двухкратной отправки с одинаковыми данными в таблицу. Поэтому, пожалуйста, помогите мне ограничить возможность отправки пользователя дважды.

Ответы

Ответ 1

попробуйте этот код.

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />

Ответ 2

После отправки формы присоедините обработчик с jQuery, который захватывает и "отключает" обработчик отправки:

var $myForm = $("#my_form");
$myForm.submit(function(){
    $myForm.submit(function(){
        return false;
    });
});

Возврат "false" из обработчика отправки предотвратит отправку формы. Кнопки отключения могут иметь странные последствия для обработки формы. Этот подход, по-видимому, в основном не имеет побочных эффектов и работает даже в формах с несколькими кнопками отправки.

Ответ 3

Вы можете отключить кнопку после нажатия или скрыть ее.

<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>

js:

 function disableButton(button) {
     button.disabled = true;
     button.value = "submitting...."
     button.form.submit();
}

Ответ 4

Вы можете уведомить пользователя о том, что он выпивает слишком много кофе, но лучше всего отключить кнопку с помощью javascript, например:

$("#btnADD").on('click', function(btn) {
  btn.disabled = true;
});

Ответ 5

Если вы работаете со сценариями на стороне сервера Java, а также с помощью struts 2, вы ссылаетесь на эту ссылку, которая говорит об использовании токена.

http://www.xinotes.org/notes/note/369/

Маркер должен быть сгенерирован и сохранен в сеансе для первоначальной рендеринга страницы, когда запрос отправляется вместе с токеном в первый раз, в действии struts запускается поток с именем потока в качестве идентификатора маркера и выполняется логика клиент запросил, когда клиент снова отправит один и тот же запрос, проверьте, продолжает ли поток (thread.getcurrentthread() прерывается), если он еще запущен, а затем отправьте перенаправление клиента 503.

И , если вы не используете какую-либо фреймворк и не ищете простую тренировку. Вы можете воспользоваться

java.util.UUID.randomUUID();

Просто поместите случайный uuid в сеанс, а также в поле скрытой формы и на другой стороне (страница jsp, где вы обрабатываете другую работу, например, хранение данных в базе данных и т.д.) вынимаете uuid из сеанса и скрытой формы, If введите полевые совпадения, чем дальше, удалите uuid из сеанса, и если это возможно, возможно, что форма была повторно отправлена.

Для вашей помощи я пишу фрагмент кода, чтобы дать представление о том, как достичь этой цели.

<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>

Ответ 6

Я сделал решение, основанное на ответе rogueleaderr:

jQuery('form').submit(function(){
    jQuery(this).unbind('submit'); // unbind this submit handler first and ...
    jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
        return false;
    });
    console.log('submitting form'); // only for testing purposes
});

Ответ 7

Когда пользователь нажимает кнопку отправки, отключите эту кнопку.

<form onSubmit="disable()"></form>

function disable()
{
     document.getElementById('submitBtn').disabled = true;
    //SUBMIT HERE
}

Ответ 8

Вы можете использовать JavaScript.

Прикрепите form.submit.disabled = true; к событию onsubmit формы.

Подкованный пользователь может обойти его, но он должен помешать 99% пользователей отправлять два раза.

Ответ 9

Вы можете отобразить успешное сообщение, используя всплывающее окно с кнопкой "ОК", когда нажмите "ОК" переадресовать в другое место

Ответ 10

Отключить кнопку отправки

$('#btnADD').attr('disabled','disabled');

      or

$('#btnADD').attr('disabled','true');

Ответ 11

Создайте класс для формы, в моем случае я использовал: _submitlock

$(document).ready(function () {
  $(document).on('submit', '._submitlock', function (event) {

      // Check if the form has already been submitted
      if (!$(this).hasClass('_submitted')) {
          // Mark the form as submitted
          $(this).addClass('_submitted');

          // Update the attributes of the submit buttons
          $(this).find('[type="submit"]').attr('disabled', 'disabled');
          // Add classes required to visually change the state of the button
          $(this).find('[type="submit"]').addClass("buttoninactive");
          $(this).find('[type="submit"]').removeClass("buttonactive");

      } else {
          // Prevent the submit from occurring.
          event.preventDefault();
      }

  });});

Ответ 12

Вы можете добавить класс в свою форму и кнопку отправки и использовать jquery:

$(function() {

    // prevent the submit button to be pressed twice
    $(".createForm").submit(function() {
        $(this).find('.submit').attr('disabled', true);
        $(this).find('.submit').text('Sending, please wait...');
    });
})

Ответ 13

Моим решением для подобной проблемы было создание отдельной скрытой кнопки отправки. Это работает так:

Вы нажимаете первую видимую кнопку.
Первая кнопка отключена.
onclick вызывает нажатие второй кнопки отправки.
Форма отправлена.

<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>

Я пошел по этому пути просто для ясности для других, работающих над кодом. Есть и другие решения, которые могут быть субъективно лучше.

Ответ 14

Поместите класс на все ваши кнопки type = "submit", например, "button-disable-onsubmit" и используйте jQuery script следующим образом:

$(function(){
    $(".button-disable-onsubmit").click(function(){
         $(this).attr("disabled", "disabled");
         $(this).closest("form").submit();
    });
});

Не забудьте сохранить этот код в общем файле javascript, чтобы вы могли использовать его на многих страницах. Подобно этому, он становится элегантным и простым в использовании. Кроме того, вы можете добавить еще одну строку, чтобы изменить текстовое значение:

$(this).val("Sending, please wait.");

Ответ 15

Добавить класс в форму при отправке, остановить двойное нажатие/отправку пользователем

$('form[method=post]').each(function(){
   $(this).submit(function(form_submission) {
     if($(form_submission.target).attr('data-submitted')){
        form_submission.preventDefault();
     }else{
        $(form_submission.target).attr('data-submitted', true);
     }
  });
});

Ответ 16

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

Я использую в своих формах jQuery validate, и если пользователь пытается отправить форму, но внешний интерфейс не позволяет отправить форму, кнопка отправки по-прежнему отключена, что означает, что пользователь не может отправить форму.

Разобравшись с отличным ответом rogueleaderr, я добавил быструю проверку, чтобы убедиться, что перед отключением повторной отправки формы не было никаких сообщений об ошибках переднего плана:

<script>
$(document).ready(function () {
		var $myForm = $("#My-Form-Class");
		$myForm.submit(function(){
			if ($(".Front-End-Error-Class")[0]){
				console.log("Front End error messages are present - don't submit");
			}
			else{
				$myForm.submit(function(){
						return false;
				});
			}
		});
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>