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

 

환경: Eclipse Mars

 

보통 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 (전송)을 자바스크립트로 실행하는 방법

 

Posted by 녹두장군

댓글을 달아 주세요