Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

보통 form 의 내용을 전송할 때 input 태그의 type=”submit” 로 세팅해서 사용합니다. 그런데 경우에 따라서 <a href> type=”button” 을 클릭했을 때 이벤트가 발생하도록 구현해야 합니다. 이렇게 버튼과 링크를 클릭했을 때 어떻게 submit 이벤트를 발생시킬지 알아 보도록 하겠습니다.

 

 

각 요소에 onclick 속성을 사용합니다. 클릭했을 때 자바스크립트를 실행하도록 하는 것입니다. 자바스크립트 소스는 getElementById() 함수로 form 객체를 가져와서 전송함수인 submit() 을 실행하는 것이죠. getElementById() 로 호출할 form id는 만들어 놔야겠죠. onclick="document.getElementById('frm').submit();" 와 같이 넣으면 됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
	background-color: #e7e7e7;
}
div {
	margin : 10px;
}
</style>
</head>
<body>
	<form action="action.jsp" id="frm">
		<div>아이디 : <br/><input type="text" name="id" value=""></div> 
		<div>비밀번호: <br/><input type="text" name="pwd" value=""></div> 
		<div><input type="button" 
					onclick="document.getElementById('frm').submit();"
					value="전송">
			<a href="#" onclick="document.getElementById('frm').submit();">
			전송 </a>
		</div>
	</form>
</body>
</html>

 

자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법

 

두 번째 방법은 DOM 오브젝트의 listener 이벤트에 폼의 submit() 실행 함수를 등록하는 것입니다. 각각의 객체를 가져오기 위해 getElementById() 함수를 사용하였습니다. window.onload 에 함수를 등록한 이유는 모든 HTML 이 화면에 로딩이 끝났을 때 실행하기 위해서 입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
window.onload = function() {
    document.getElementById('btn').onclick = function() {
        document.getElementById('frm').submit();
        return false;
    };
};
//-->
</script>
</head>
<body>
	<form action="action.jsp" id="frm">
		<div>아이디 : <br/><input type="text" name="id" value=""></div> 
		<div>비밀번호: <br/><input type="text" name="pwd" value=""></div> 
		<div><input type="button" id="btn" value="전송"></div>
	</form>
</body>
</html>

 

자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
자바스크립트(Javascript) display 속성 이용해서 접거나 펴기
자바스크립트(Javascript) escape, encodeURI
자바스크립트(JavaScript) 소스 테스트 사이트 소개
인터넷 익스플로러 자바스크립트 실행 허용 활성화하는 방법
바스크립트(JavaScript) 날짜 계산하는 다양한 방법
반응형
Posted by 녹두장군

댓글을 달아 주세요