| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- 안드로이드 개발
- MapView
- 안드로이드폰
- 안드로이드 바탕화면
- 안드로이드2.0개발
- 스마트폰 배경화면
- 안드로이드2.0
- android
- 안드로이드 2.0 개발
- 안드로이드 개발 2.0
- 안드로이드개발
- 인기있는 블로그 만들기
- 스카이 안드로이드폰 시리우스
- 안드로이드 배경화면
- 아이폰 바탕화면
- 아이폰 배경화면
- objective-c
- 안드로이드
- 구글 안드로이드 개발
- 안드로이드 개발 강좌
- Form Stuff
- 영어
- 하루 한마디 영어
- SKY 시리우스
- sky 시리우스폰
- 구글 안드로이드
- 구글안드로이드
- 안드로이드 개발 2.0 강좌
- 하루한마디영어
- 스카이 안드로이드폰 시리우스 K양 동영상
- Today
- Total
moozi
3/17 attr 메서드를 활용하는 예제 본문
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function f1(){
alert(document.form1.userId.value);
}
$(document).ready( //문서가 load되면 실행됨.
function(){
$("#btn2").click(// btn2가 클릭되면 실행됨
function(){
//userId의 값을 읽어옴
alert($("#userId").val());//getter
}
);
$("#btn3").click(// btn3가 클릭되면 실행됨
function(){
//userId에 값을 저장함.
$("#userId").val("홍길동");//setter
}
);
// $("#form2").attr("action", "reg2.jsp");//action값 변경
$("#btn5").click(
function(){
$("#form2").attr("action","http://search.daum.net/search");
$("#address").attr("name","q");
}
);
$("#btn6").click(
function(){
$("#form2").attr("action","https://www.google.co.kr/search");
}
);
$("#btn7").click(
function(){
/*
1. 콤보박스 select1의 값을 얻는다.
2. if문으로 값을 체크해서 action값,
address의 name값을 변경한다.
*/
var search;
search=$("#select1").val();//콤보박스 select1의 값을 변수에 저장
if(search=="daum"){ //다음이면
$("#form3").attr("action","http://search.daum.net/search");
$("#keyword").attr("name","q");
}else if(search=="google"){ //구글이면
$("#form3").attr("action","https://www.google.co.kr/search");
}
}
);
//select2가 변경되면 작업실행
$("#select2").change(
function(){
var keyword;
keyword=$("#keyword2").val();
if(keyword==""){//값이 없으면
alert("검색어를 입력하세요!");//경고창을 띄움
$("#keyword2").focus(); //검색어 입력창에 포커스
return;//함수종료.
}
var search;
search=$("#select2").val();//콤보박스 select1의 값을 변수에 저장
if(search=="naver"){
$("#form4").attr("action","http://search.naver.com/search.naver");
}
else if(search=="daum"){ //다음이면
$("#form4").attr("action","http://search.daum.net/search");
$("#keyword2").attr("name","q");
}else if(search=="google"){ //구글이면
$("#form4").attr("action","https://www.google.co.kr/search");
}
document.form4.submit();//전송
}
);
}
);
</script>
</head>
<body>
<form id="form1" name="form1" action="login.jsp" method="post">
<input type="text" id="userId">
<input type="button" id="btn1" value="login" onClick="f1()">
<input type="button" id="btn2" value="login">
<input type="button" id="btn3" value="set">
</form>
<form id="form2" name="form2" action="http://search.naver.com/search.naver" method="get">
<input type="text" id="address" name="query">
<input type="submit" id="btn4" value="네이버검색">
<input type="submit" id="btn5" value="다음검색">
<input type="submit" id="btn6" value="구글검색">
</form>
<form id="form3" name="form3" action="http://search.naver.com/search.naver" method="get">
<input type="text" id="keyword" name="query">
<select id="select1" name="select1">
<option value="naver">네이버</option>
<option value="daum">다음</option>
<option value="google">구글</option>
</select>
<input type="submit" id="btn7" value="검색">
</form>
<form id="form4" name="form4" action="http://search.naver.com/search.naver" method="get">
<input type="text" id="keyword2" name="query">
<select id="select2" name="select2">
<option value="default">===선택하세요===</option>
<option value="naver">네이버</option>
<option value="daum">다음</option>
<option value="google">구글</option>
</select>
</form>
</body>
</html>
'TIS_2016 > HTML5_1기' 카테고리의 다른 글
| 메뉴왼쪽으로 옮기기 (0) | 2016.03.18 |
|---|---|
| 3/17 jquery append prepend 예제 (0) | 2016.03.17 |
| 3/16 animation 예제 코드 (0) | 2016.03.16 |
| animation 샘플이미지 (0) | 2016.03.16 |
| form validation 예제 (0) | 2016.03.16 |
