[jQuery] Form Submit 할 때 AJAX 이용하여 Value 체크

괜한 것을 한번 해보겠다고 아침부터 덤벼서 이제야 조금 답이 보이기 시작했다. 어제 퇴근 길에 괜한 생각을.. ㅋ
내가 조심해야 할 것은 퇴근 길 버스 안에서 쓸데없는(?) 생각을 하지 않는 것이다. 항상 이것때문에 내가 힘들다는..

구현하려고 했던 것이 무엇이냐하면 회원들의 회비를 입력하는 폼이 있는데 이 때 AJAX를 이용해서 회원등급에
따라 회비 금액이 맞는지 체크하고자 했다. 관리자가 입력하는 부분이기 때문에 설령 맞지 않더라도 입력을 할 수
있도록 해야할 것 같았고.. PHP에서 체크하는 방법으로 처음에 구현을 했는데 이럴 경우 강제로 입력하도록 하는
부분이 막히고.. 그래서 자바스크립트를 이용하는 방법을 생각했다. 물론 유일하게 사용할 수 있는 jQuery를.. ^^;

아래는 바로 그 코드이다.

이 코드는 여러 번의 수정을 걸쳐서 원하는 대로 작동을 하는 코드이다. IE9와 Firefox 6에서 테스트 했다.

처음에는 $(‘form[name=fee]’).submit(function(event) { ….. }); 이런 식으로 체크를 하려고 했는데 이렇게 했을 경경우 $.get AJAX call이 완료가 되기도 전에 form 이 submit 되는 문제가 있었다. 그래서 다음으로 시도했던 방법은 <input type=”submit” id=”Submit” value=”확 인” /> 이런 식으로 확인 버튼을 변경해서 $(‘input#Submit’).submit(function(event) { ….. }); 이런 식으로 체크를 하도록 했는데 IE9에서는 이 방법이 정상적으로 먹히지만 Firefox에서 테스트하니 처음과 같은 문제가 발생했다. 대부분 IE를 사용해서 수정하지 않아도 크게 문제될 부분은 없을 거라 생각을 했지만.. 여기서 또 쓸데없는 자존심이라고 해야할까? Firefox에서도 제대로 되게 해보자라는 생각이 들어서 검색과 코드 수정 그리고 테스트.. 몇 시간이 걸려서 겨우 방향을 잡았다. 자바스크립트에 대해서 워낙 기본 지식이 없다보니 이런 문제가 생겨도 혼자서는 해결 할 수가 보통은 없다. ^^;

위에 보면 자바스크립트 마지막 부분에 return false; 라는 부분 때문에 submit 이벤트가 실행이 되면 안되는데 이게 자꾸 실행이 되는 것이 문제였다. 이벤트 실행을 멈춰보려고 여러 방법을 사용해봤지만 도무지 되지를 않아서 나머지 방법이라 생각하고 $(‘input#Submit’).submit(function(event) { ….. }); 를 $(‘input#Submit’).click(function(event) { ….. }); 라고 변경을 해봤다. 근데 왠걸 내가 원했던 대로 실행이 되는 것이었다. 지금까지 도대체 뭘 한걸까? 라는 의문이 들어 정말 미칠 것 같았지만 그래도 내가 원하는 대로 작동을 했기 때문에 사실은 너무도 기분이 좋았다. 이 맛에 코딩을 아직 하고 있는지도 모르겠다. 이런 거라도 없으면 벌써 그만둬도 그만뒀을 것이라 난 굳게 믿고 있다.

간혹 <input type=”image” src=”…” /> 이런 식으로 버튼을 보여주는 경우가 있는데 이 때도 역시 click 이벤트가 일어났을 때 체크하도록 하면 문제없이 작동한다는 것을 알았다. form 안에 있는 버튼이기 때문에 submit 이벤트라고 생각했던 것이 정말 바보 같은 짓이었던 것이다. 기본이 없으니 이럴 수 밖에 없지만 말이다. ㅋㅋ

근데 이렇게 하는 것이 맞는 것인지는 솔직히 자신은 없다. 자바스크립트에 대해서 기본부터 다시 공부를 해야겠다.