반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//브라우저 내장객체
//window - location
// - history
// - document - images, link,...
// - form - text,password,textarea
// - checkbox, radio
// - select - option
// document.forms[0].멤버변수 action method
// document.forms[0].멤버함수() submit()전송 reset() 초기화
// document.폼이름.멤버변수 action method
// document.폼이름.멤버함수() submit()전송 reset() 초기화
function fun1() {
alert(document.forms[0].action);
alert(document.forms[0].method);
// action="a.jsp" 폼에 들어있는 내용을 가지고 서버에 a.jsp를 요청(전송)
// method="get" 주소줄에 이름=값으로 데이터 들고감
document.forms[0].submit();
}
function fun2() {
// action변수 "b.jsp" 변경 , method "post" 변경
document.fr.action="b.jsp";
document.fr.method="post";
alert(document.fr.action);
alert(document.fr.method);
// action="b.jsp" 폼에 들어있는 내용을 가지고 서버에 b.jsp를 요청(전송)
// method="post" 주소줄에 안보이면서 데이터 들고감
document.fr.submit();
}
function fun3() {
//초기화
document.fr.reset();
}
function fun4(a) {
// alert(a);
// basket 값을 받았을때 action변수 basket.jsp 변경
// order 값을 받았을때 action변수 order.jsp 변경
if(a=='basket'){
document.fr.action="basket.jsp";
alert("장바구니로 이동");
}else{
document.fr.action="order.jsp";
alert("주문하기로 이동");
}
// alert(document.fr.action);
// 전송 submit()
document.fr.submit();
}
</script>
</head>
<body>
<h1>js2/test1.html</h1>
<form action="a.jsp" method="get" name="fr">
<input type="text" name="tx">
<input type="button" value="폼속성" onclick="fun1()">
<input type="button" value="폼속성변경" onclick="fun2()">
<input type="button" value="초기화" onclick="fun3()">
<input type="reset" value="초기화버튼">
<input type="button" value="장바구니" onclick="fun4('basket')">
<input type="button" value="바로구매" onclick="fun4('order')">
</form>
</body>
</html>폼속성 버튼 클릭-action="a.jsp" - method="get" alert실행 후 a.jsp로 전송
폼속성 변경 버튼 클릭- action="b.jsp" - method="post" alert실행 후 b.jsp로 전송
404오류 => 웹페이지가 없음, b.jsp파일이 없기때문에 이 페이지로 이동
//초기화 기능 두가지 방법
//1번째 방법
function fun3() {
document.fr.reset();
<input type="button" value="초기화" onclick="fun3()">
//2번째 방법
<input type="reset" value="초기화버튼">
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 폼 속성 form(checkbox, radio) (0) | 2021.11.11 |
|---|---|
| [JavaScript] 텍스트 상자 (0) | 2021.11.11 |
| [JavaScript] 브라우저 내장객체(document) (0) | 2021.11.09 |
| [JavaScript] 브라우저 내장객체(History Object) (0) | 2021.11.09 |
| [JavaScript] 브라우저 내장객체(Location Object) (0) | 2021.11.07 |