HTML 폼(form) 크롬에서 두번 눌러야 제출(submit) 될때.

기존 소스를 좀 건드려야 돼서 수정하고 테스트 하다가, 어이없게 시간을 뺏긴 경우가 있어서 포스팅 하나 해 봅니다. 간단한 form과 자바스크립트 함수 입니다.

<form action="javascript:check_before_submit(this);">
...
<input type="image" ... >
</form>

<script language="JavaScript">
function check_before_submit( f ){
    ...
    f.action = "http://...";
    f.submit(); // or return true;
}
</script>

form안의 image 타입의 input은 submit 버튼 역할을 합니다. 버튼을 누르면 action 속성이 향하는 자바스크립트 함수를 호출 하겠죠. 함수 내에서 action 속성을 변경하고 form의 submit() 함수를 호출 합니다.

IE에서 탈이 없길래 form 부분은 보지도 않았습니다. 크롬에서 테스트 중에 버튼을 처음 눌렀을 때는 아무 반응이 없고, 두 번째 눌렀을 때 반응이 오더군요. 괴상하다 싶어 뒤져보니 소스가 저렇게 돼있었네요.

크롬에서 action 속성이 가리키는 함수에서 action 값을 바꾸면 에러가 발생하는 걸까요. 자세한 건 모르겠지만, 바로 아래 submit() 함수는 실행이 되지 않네요. return 구문으로 바꿔도 동일 합니다.

그래서 처음 눌렀을 때 함수 호출을 통해 action 속성을 바꾸고, 두 번째 클릭했을 때 바로 바뀐 값으로 submit 되는 거라 추측이 되네요. 아래처럼 수정하면 IE나 크롬이나 문제 없이 잘 됩니다. form의 action 속성은 onsubmit으로. 자바스크립트 함수는 true값을 리턴 하는 것으로!

<form onsubmit="return check_before_submit(this);">
...
<input type="image" ... >
</form>

<script language="JavaScript">
function check_before_submit( f ){
    ...
    f.action = "http://...";
    return true;
}
</script>