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


183

필드가 올바르게 채워 졌는지 묻는 경고가있는 간단한 양식의 경우 다음을 수행하는 기능이 필요합니다.

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

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

JavaScript 확인이 작동한다고 생각하지만 방법을 알 수없는 것 같습니다.

내가 가진 코드는 다음과 같습니다

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>

답변:


397

간단한 인라인 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);">

28

의견에서 지적 된 문제는 유효하므로 여기에 영향을 미치지 않는 다른 개정판이 있습니다.

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



2

좋아, 코드를 다음과 같이 변경하십시오.

<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>


0

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

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

메소드액션 속성은 onsubmit 속성 뒤에 쓴다는 것을 항상 명심하십시오.

자바 스크립트 코드

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.