HTML요소 이벤트 -form_js
2022. 1. 30. 13:06ㆍksmart_html_css_js/JavaScript
728x90
- form 태그에 name 속성에 값을 지정하면 해당 지정된 값을 윈도우 객체에 등록해준다.
- form 의 하위 요소가 있다면 form 객체 하위에 name키 객체를 등록해준다.
<form name="myForm"></form>
<script type="text/javascript">
console.log(myForm);
//객체 속성으로 폼 속성 값 지정하기
myForm.action="#";
</script>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title>html 요소 이벤트 - form</title>
</head>
<body>
<form name="myForm" method="post">
<input type="text" name="userName">
<input type="radio" name="userGender" value="남">남
<input type="radio" name="userGender" value="여">여
</form>
<button type="button" onclick="go();">전송</button>
<script type="text/javascript">
console.log(myForm);
//객체 속성으로 폼 속성 값 지정하기
myForm.action="user.jsp";
console.log(myForm.userName);
function go(){
var f= myForm;
if(f.userName.value.trim()==''){
alert('값을 입력 하셔야 합니다.');
//focus()->form 객체에 커서 활성화 시
f.userName.focus();
return;//함수종료 30번째 줄 f.submit()진행X
}
//동일한 name의 값을 가진 객체가 2개 이상 일 시 배열로 받아오게 된다.
console.log(f.userGender);
var cnt=0;
for(var i=0;i<f.userGender.length;i++){
//체크가 되어있다면 true 아니라면 false
if(f.userGender[i].checked){
cnt++;
}
}
if(cnt==0){
alert('성별을 체크해주세요.');
f.userGender[0].focus();
return;
}
//form 객체에는 submit 메서드가 있다.
//submit 메서드 실행 시 action에 명시된 경로로 양식 전송
f.submit();
}
</script>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String userName=request.getParameter("userName");
String userGender=request.getParameter("userGender");
%>
회원명 : <%=userName%>
성별 : <%=userGender%>728x90
'ksmart_html_css_js > JavaScript' 카테고리의 다른 글
| CSS 선택자로 검색_js (0) | 2022.01.30 |
|---|---|
| document_js (0) | 2022.01.30 |
| HTML요소(on속성)이벤트_js (0) | 2022.01.30 |
| 02. 브라우저 객체 모델_js (0) | 2022.01.30 |
| 01. 브라우저 객체 모델_js (0) | 2022.01.30 |