[JavaScript] form action과 onsubmit()으로 다음 페이지 넘어가기

 

HTML의 form action, JavaScript의 onsubmit()을 활용하면 다음 페이지로 넘어가는 이벤트를 줄 수 있다.

 

반응형

 

Form action & onsubmit()

action : form 데이터를 처리할 프로그램의 URI(Uniform Resource Identifier)를 지정한다. 웹 문서 링크를 문자열 형태로 작성한 뒤 form의 데이터를 전송하면 해당 루트로 이동한다. php나 jsp로 작성한 문서를 지정해 데이터를 처리하는 것도 가능하다. 

 

onsubmit() : 양식 제출 이벤트가 발생할 때의 동작을 지정할 수 있다. form 태그 내부에서 type="submit"으로 인해 발생하는 이벤트를 처리할 수 있다. 이벤트 발생과 url이 적용되는 시점 사이에 처리할 동작을 지정할 수 있다. 

 

<form action="url">
	<input type="submit" onsubmit="formSubmit()" />
</form>

<script>
	function formSubmit() {
		alert("hello world");
        return true;
    }
</script>

위와 같이 작성한 뒤 input을 클릭하면 action의 url로 이동하기 전 submit 이벤트 처리가 진행된다. 

이때 JS내 함수가 실행되는데 이는 formSubmit()을 반환하는 것이다. 그 뒤 action이 실행된다. 

 

action을 실행시키지 않고 싶다면 return false값을, 아니면 true값을 넣어줘야 한다.

onsubmit()은 return이 true일 때 폼을 전송하기 때문이다!!

onsubmit 이벤트 속성에 들어가는 함수는 반드시 전송해야 할 경우 true를 반환하고, 하지말아야 할 경우 false를 반환하는 형식이어야 한다.

 

근데 나는 지금 405가 떴고 그 에러를 해결해야 한다.......