양식 요소를 비활성화하지 않고 jQuery에서 이중 양식 제출을 방지하는 방법은 무엇입니까?

jQuery를 사용하여 양식에서 이중 제출 방지

사용자는 특히 처리하는 데 시간이 오래 걸리는 경우 실수로 양식을 다시 제출하는 경우가 많습니다. 이를 방지하기 위해 jQuery를 사용하여 초기 시도 후 양식 제출을 비활성화할 수 있습니다. 그러나 경우에 따라 입력을 포함한 모든 양식 요소를 비활성화하면 의도치 않게 제출 자체가 방지될 수 있습니다.

jQuery 플러그인을 사용하여 개선된 솔루션

대체 접근 방식은 다음을 사용하는 것입니다. 이중 제출 방지를 처리하는 jQuery 플러그인. 이 플러그인은 jQuery의 data() 메소드를 활용하여 양식 제출 여부를 표시합니다.

jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit', function(e) {
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};

사용법

이 플러그인을 사용하려면 $(' form').preventDoubleSubmission();.

허용된 AJAX 제외 양식

특정 양식(예: AJAX 양식)을 여러 번 제출하도록 허용해야 하는 경우 다음 예와 같이 CSS 클래스를 사용하여 제외할 수 있습니다.

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

이 방법을 사용하면 문제 없이 양식을 제출할 수 있으며 실수로 다시 제출하는 것을 효과적으로 방지하여 사용자 경험을 향상하고 잠재적인 데이터 손실을 방지할 수 있습니다.

위 내용은 양식 요소를 비활성화하지 않고 jQuery에서 이중 양식 제출을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!