지난 시간 Form onsubmit 이벤트 시 isSubmit 플래그를 이용하여 submit을 제어하는 방법을 언급하였습니다.
결론부터 얘기를 하면 ajax 통신이 성공이었을 때, 추가 작업을 진행하지 못하고 submit이 되는 버그를 발견하였습니다.
ajax 통신이 error가 났을 때는 원하는 대로 제어가 가능하였는데, 성공 시에는 제어가 되지 않습니다.
해결 방법으로는 Form 태그의 onsubmit을 사용하지 않고 jquery의 $('#theForm').submit(function(event){})을
이용하여 해결이 가능합니다.
중요한 것은 event.preventDefault(); 를 선언하여 submit 이벤트를 무력화 시킨 후
javascript에서 원하는 작업을 모두 마친 후 this.submit(); 을 통해서 Form 전송을 시킬 수 있습니다.
Javascript jquery submit 이벤트 시 자동 submit 보내지 않기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form name="theForm" action="" method="post" id="theForm">
<input type="submit" />
</form>
<script>
$('#theForm').submit(function(event){
// 자동 submit을 시키는 것을 막는다.
event.preventDefault();
/**
* 입력 필드 validattion check 로직
*/
/**
* ajax로 다른 페이지를 처리 후에 결과가 성공일 때 전송 처리를 한다.
*/
// 전송 여부 boolean 값
// 초기값은 false로 셋팅을 한다.
var isSubmit = false;
$.ajax({
url:'[주소]',
type:'post',
data:$('form').serialize(),
dataType:'json',
// 다른 페이지를 처리 후에 결과가 성공일 때
// 비동기식으로 처리를 함
async: false,
success:function(data)
{
var message = data.message;
// 결과값이 성공이면 전송 여부는 true
if ( message == 'Success' )
{
isSubmit = true;
}
else
{
// 결과값이 실패이면 전송 여부는 false
// 앞서 초기값을 false로 해 놓았지만 한번 더 선언을 한다.
isSubmit = false;
}
},
error:function(request, status, error)
{ // 오류가 발생했을 때 호출된다.
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
// ajax 처리가 결과가 에러이면 전송 여부는 false
// 앞서 초기값을 false로 해 놓았지만 한번 더 선언을 한다.
isSubmit = false;
},
beforeSend:function()
{
// 로딩바를 보여준다.
},
complete:function()
{
// 로딩바를 해제한다.
}
});
if ( isSubmit ) this.submit();
})
</script>
</body>
</html>
2020/03/03 - [유용한 활용팁] - Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false
Javascript Form onsubmit 이벤트 시 ajax 결과에 따라서 전송 처리하기 - async: false
Form에서 onsubmit 이벤트를 사용할 때 Javascript로 ajax 결과에 따라서 전송 처리하는 방법입니다. 1. ajax 설정 값 중 async를 false로 설정합니다. - async: false 는 동기식 즉 절차적으로 처리를 한다는 의..
han288.tistory.com