onsubmit 이벤트 핸들러 / form 전송 시 함수 호출 후 전송
입력한 폼을 컨트롤러로 전송하기 전에(form action이 수행되기 전에) 함수를 통해 입력한 내용이 유효한지 확인하거나, 또는 모달창을 닫고 부모창을 새로고침 함으로써 자연스레 입력한 값이 부모창에 노출되게 해야할 필요가 분명 있을 것이다.
현재 진행하는 프로젝트에서는 스케줄을 입력 시 옵션을 Loop로 할 지, OneTime으로 할 지 선택을 해야하는데 각 선택값마다 입력하는 폼이 다르다. 동적으로 html을 생성하지 않고 hide(), show()메소드를 사용해서 가려주고 보여주는 형식으로 코드를 짰기 때문에 폼 전송 시 가려졌던 폼도 전송이 되는 이슈가 발생하였다.
(지금 생각해보니 동적으로 html form을 생성했다면 더 쉽고 코드가 간결했을 텐데 아쉽다. 하지만 내가 했던 방법도 분명 언젠가 쓰일 곳이 있을 것이다!)
그래서 옵션 선택 시 가려진 폼이 전송이 안되게끔 하기 위해 form action이 실행되기 전 자바스크립트 함수를 한번 거쳐서 실행이 되도록 하였다.
추가로, 작업을 등록할 때에도 등록 버튼을 눌러서 API를 호출 한 후, 모달창이 닫히면서 자연스레 부모창이 새로고침이 되도록 하고 싶었다. 그때 생각해낸 방법도 이 글에서 다루고자 하는 방법이었다.
onsubmit 이벤트 핸들러
onsubmit은 양식 제출 이벤트가 발생할 때의 동작을 지정하는 이벤트 핸들러이다.
onsubmit은 <form> 태그 내부에서 <input type="submit">로 인해 발생하는 이벤트를 처리할 수가 있다. 이벤트 발생과 action에 지정된 URL이 적용되는 그 사이의 시점에 처리할 동작을 이 onsubmit 속성을 통해 지정할 수 있는 것이다.
위의 사진 같이 onsubmit을 지정해주면 action 이벤트가 실행 되기 전에 addSchedule() 이라는 함수를 거쳐서 실행 된다.
하지만 여기서 저 addSchedule이라는 함수를 거쳐서 무조건 action 이벤트가 실행 되는 것은 아니다. addSchedule 함수의 리턴값이 true 일 때만 action 이벤트가 발생되고 false가 반환되면 이벤트 처리를 강제로 종료시키기 때문에, action 이벤트가 발생되지 않는다.
function addSchedule() {
var tagId = $('.CronIsVaildText').attr('id');
if ($('#loop').is(':checked')) {
if (tagId == "fail" || $('#Cron-expression').val() === '') {
alert("크론식을 다시 입력해주세요.");
return false;
} else {
alert("Schedule 추가 완료!");
$('#scheduleModal').modal('hide')
return true;
}
} else {
alert("Schedule 추가 완료!");
$('#scheduleModal').modal('hide')
return true;
}
}위의 코드는 addSchedule함수이다. 2번째 줄의 '.CronIsValidText' 는 크론식이 올바른지, 빈칸인지에 대해서 텍스트로 사용자에게 보여주는 b태그의 클래스명이다.
해당 클래스의 id값을 가져온 후, 사용자가 선택한 옵션이 Loop일 때 조건을 검사해줘야 한다.(옵션이 Loop인 경우에는 크론식을 입력해줘야 하기 때문이다.)
tagId 가 fail인 경우는 크론식이 잘못됬다는 경우이고, 크론식 텍스트 박스가 공백이면 입력된 크론식이 없다는 뜻이기 때문에 false를 반환한다.
그 경우가 아니라면, 크론식이 올바르게 작성됬다는 뜻이므로 모달을 닫고 true를 반환한다.