itsource

JavaScript 양식 제출 - 제출 확인 또는 취소 대화 상자

mycopycode 2022. 9. 19. 23:39
반응형

JavaScript 양식 제출 - 제출 확인 또는 취소 대화 상자

필드가 올바르게 입력되었는지 묻는 알림이 있는 간단한 폼의 경우 다음과 같은 기능이 필요합니다.

  • 다음 두 가지 옵션으로 버튼을 클릭하면 알림 상자가 표시됩니다.

    • "확인"을 클릭하면 양식이 제출됩니다.
    • 취소를 클릭하면 알림 상자가 닫히고 양식을 조정하여 다시 제출할 수 있습니다.

JavaScript confirm은 동작할 것 같은데 어떻게 동작하는지 알 수 없습니다.

현재 보유하고 있는 코드는 다음과 같습니다.

function show_alert() {
  alert("xxxxxx");
}
<form>
  <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

간단한 인라인 JavaScript 확인만으로 충분합니다.

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

다음과 같은 작업을 수행할 수 있는 검증을 수행하지 않는 한 외부 기능은 필요하지 않습니다.

<script>
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?');
    }
}
</script>
<form onsubmit="return validate(this);">

JS 확인 기능을 사용할 수 있습니다.

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}

심플하고 간단:

<form onSubmit="return confirm('Do you want to submit?') ">
  <input type="submit" />
</form>

코드를 다음과 같이 변경합니다.

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

또, 이것은 실행중의 코드입니다만, 동작의 구조를 알기 쉽게 하기 위해서입니다.아래의 코드를 실행하고, 결과를 확인해 주세요.

function submitForm() {
  return confirm('Do you really want to submit the form?');
}
<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

양식 제출 시 일부 조건을 적용하려면 이 방법을 사용할 수 있습니다.

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

한 가지 유의할 점은 메서드 및 액션 속성은 전송 시 속성 뒤에 쓴다는 입니다.

javascript 코드

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}

언급URL : https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box

반응형