양식 제출 JavaScript 방지

1. script태그 내의 함수를 사용하여 JavaScript에서 양식 실행 중지
2. Vanilla JavaScript를 사용하여 JavaScript에서 양식 실행 중지
3. jQuery라이브러리를 사용하여 JavaScript에서 양식 실행 중지
4. Dojo 툴킷을 사용하여 JavaScript에서 양식 실행 중지

JavaScript는 모든 웹 브라우저에서 지원되며 동적 웹 페이지를 만드는 데 사용됩니다. 이 자습서에서는 JavaScript를 사용하여 양식 실행을 중지합니다.

script태그 내의 함수를 사용하여 JavaScript에서 양식 실행 중지

script태그는 클라이언트 측 스크립트를 포함하는 데 사용됩니다. 양식 제출을 방지하기 위해script태그 내에 JavaScript 함수를 만들었습니다.

아래 코드를 확인하십시오.

<form onsubmit="submitForm(event)">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
  function submitForm(event){
    event.preventDefault();
    window.history.back();
  }
</script>

preventDefault()함수는 이벤트의 기본 조치가 발생하도록 허용하지 않습니다. window.history.back()은 역사의 이전 URL로 이동합니다. 논의되는 모든 방법에는이 두 가지 기능이 포함됩니다.

Vanilla JavaScript를 사용하여 JavaScript에서 양식 실행 중지

Vanilla JavaScript는 추가 라이브러리를 사용하지 않고 순수하게 JavaScript에서 작동합니다.

이벤트 리스너를 사용하여 양식 제출을 방지 할 수 있습니다. 제출 버튼에 추가되어 기능을 실행하고 클릭시 양식 제출을 방지합니다.

예를 들면

element.addEventListener('submit', function(event) {
  event.preventDefault();
  window.history.back();
}, true);

jQuery라이브러리를 사용하여 JavaScript에서 양식 실행 중지

jQuery는 JavaScript 사용을 단순화하는 빠르고 강력한 라이브러리입니다. 가장 인기있는 JavaScript 라이브러리 중 하나입니다.

양식 제출을 방지하는 방법을 살펴 보겠습니다.

아래 코드를 확인하십시오.

$('#form').submit(function(event) {
  event.preventDefault();
  window.history.back();
});

$('#form').submit()함수는 jQuery에서 양식을 제출하는 데 사용됩니다.

Dojo 툴킷을 사용하여 JavaScript에서 양식 실행 중지

웹 기반 애플리케이션을위한 JavaScript의 크로스 플랫폼 사용을 용이하게하는 JavaScript 라이브러리입니다. dojo.connect()함수를 사용하여 이벤트를 처리합니다. 우리의 경우 이것은 양식 제출에 사용되며preventDefault()및window.history.back()함수를 사용하여이를 방지합니다.

예를 들면

dojo.connect(form, 'submit', function(event) {
  event.preventDefault();
  window.history.back();
});