>웹 프론트엔드 >JS 튜토리얼 >제출 및 취소 옵션이 있는 JavaScript 양식 제출 확인 대화 상자를 어떻게 구현할 수 있습니까?

제출 및 취소 옵션이 있는 JavaScript 양식 제출 확인 대화 상자를 어떻게 구현할 수 있습니까?

Patricia Arquette
Patricia Arquette원래의
2024-10-31 08:15:30694검색

How Can I Implement a JavaScript Form Submission Confirmation Dialog with Submit and Cancel Options?

JavaScript 양식 제출: 제출 및 취소 옵션이 있는 확인 대화 상자

인라인 JavaScript 확인 ​​대화 상자 사용

옵션이 있는 양식 제출 확인 대화 상자를 구현하려면 제출하거나 취소하려면 인라인 JavaScript 확인 ​​대화 상자를 사용할 수 있습니다. 이 대화 상자는 사용자에게 양식 제출을 확인하라는 팝업 메시지를 표시하고 "확인"과 "취소"라는 두 개의 버튼을 제공합니다.

인라인 JavaScript 확인 ​​대화 상자를 사용하려면 HTML에 다음 코드를 추가하세요. form:

<code class="html"><form onsubmit="return confirm('Do you really want to submit the form?');"></code>

검증 및 확인을 위해 외부 함수 사용

사용자에게 확인 메시지를 표시하기 전에 추가 검증을 수행해야 하는 경우 검증 및 확인을 위한 외부 JavaScript 함수를 생성할 수 있습니다. 확인. 방법은 다음과 같습니다.

  1. 검증을 수행하고 부울 값(유효한 경우 true, 유효하지 않은 경우 false)을 반환하는 JavaScript 함수를 만듭니다.
<code class="javascript">function validate(form) {

    // Validation code here ...

    if (!valid) {
        alert('Please correct the errors in the form!');
        return false;
    }
    else {
        return confirm('Do you really want to submit the form?');
    }
}</code>
  1. HTML 양식의 onsubmit 이벤트 핸들러에 기능을 추가하세요.
<code class="html"><form onsubmit="return validate(this);"></code>

확인 대화 상자 사용자 정의

메시지와 버튼을 사용하여 확인 대화 상자의 메시지와 버튼 라벨을 사용자 정의할 수 있습니다. verify() 함수의 옵션입니다. 예:

<code class="javascript">confirm({
  message: 'Are you sure you want to continue?',
  buttons: ['Yes', 'No', 'Cancel']
});</code>

위 내용은 제출 및 취소 옵션이 있는 JavaScript 양식 제출 확인 대화 상자를 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.