반응형
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
반응형
'itsource' 카테고리의 다른 글
안드로이드에서 비행기 모드를 감지하려면 어떻게 해야 하나요? (0) | 2022.09.19 |
---|---|
MariaDB 5.3에서 5.5로의 업그레이드 (0) | 2022.09.19 |
JSF가 UI 컴포넌트 상태를 서버에 저장하는 이유는 무엇입니까? (0) | 2022.09.19 |
Java에서 숫자에 선행 0을 추가하시겠습니까? (0) | 2022.09.19 |
PHP에서 문자열을 JSON 개체로 변환하는 방법 (0) | 2022.09.19 |