반응형
보통 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>
▼ 두 번째 방법은 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) display 속성 이용해서 접거나 펴기 ▶ 자바스크립트(Javascript) escape, encodeURI ▶ 자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 ▶ 인터넷 익스플로러 자바스크립트 실행 허용 활성화하는 방법 ▶ 자바스크립트(JavaScript) 날짜 계산하는 다양한 방법 |
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 parseFloat 함수 이용해서 문자열을 실수로 변환하기 (0) | 2023.10.11 |
|---|---|
| 자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하기 (0) | 2023.10.11 |
| 자바스크립트 배열 Array 초기화 하는 다양한 방법 (0) | 2023.10.10 |
| 자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법 (1) | 2023.09.22 |
| 자바스크립트 크롬 브라우저로 디버깅 하는 방법 (0) | 2022.08.17 |
| 자바스크립트(Javascript) 뒤로 가기 막는 방법 (1) | 2020.01.08 |
| 자바스크립트 구구단 출력하는 방법 (0) | 2019.11.06 |
| 웹 개발을 위한 아톰 에디터 설치, 사용하는 방법 (0) | 2019.07.13 |
