초보자의 JAVA 일기: JavaScript 28 Form

form은 submit 버튼을 통해서 서버에 보낼 data를 입력하는 폼을 말한다. 이때 서버에 data 보내는 것을 쉽게 풀어서 생각해 보면 원격에 있는 함수를 호출 하는 것이라 생각하면 좋다. form 에는 input, select, textarea 등 여러가지 구성 요소가 있고 각각은 속성으로 name을 갖는데 이 name이 서버에 보낼 당시의 parameter 이름이 된다. 만약 속성에 name 이 없다면 해당 값은 서버에 제출하지 않는 것이 된다.

속성

name : data의 parameter 명
action : data를 제출할 server URL (원격함수)
method : data를 제출하는 전송 형식 (get(default) / post)

보내는 형식
function?parameter=data&parameter=data.......

search6.html

<!DOCTYPE html>
<html>
<head>
</head>
<link type="text/css" rel="stylesheet" href="search.css" />
<body>
<div class='container'>
<select id='select' onBlur='remake()'>
<option value='daum' selected="selected">다음</option>
<option value='naver'>네이버</option>
<option value='google'>구글</option>
<option value='zum'>ZUM</option>
</select>
<form id="my-form" action='http://search.daum.net/search'>
<input id='engine' type='text' name='q' value=''>
<input id='submitBtn' type='submit' value='검색'>
</form>
</div>
<script>
var pin = document.getElementById('engine');
var eng = document.getElementById('select');
var engS = eng.options[eng.selectedIndex].value;
var form = document.getElementById('my-form');
//console.log(engS);
window.onload = function () {
// 이벤트를 연결합니다.
form.onsubmit = function () {
if(pin.value!=''){
eng = document.getElementById('select');
engS = eng.options[eng.selectedIndex].value;
}else {
return false;
}
};
};
function remake(){
eng = document.getElementById('select');
engS = eng.options[eng.selectedIndex].value;
//console.log(engS);
if (engS=='daum'){
form.action='http://search.daum.net/search';
pin.name='q';
//pin.value='';
console.log('daum');
} else if (engS=='naver'){
form.action='http://search.naver.com/search.naver';
pin.name='query';
//pin.value='';
console.log('naver');
} else if (engS=='google'){
form.action='https://www.google.co.kr/search';
pin.name='q';
console.log('google');
} else if (engS=='zum'){
form.action='http://search.zum.com/search.zum';
pin.name='query';
}
}
</script>
</body>
</html>

초보자의 JAVA 일기

블로그 보관함

2014년 3월 11일 화요일

JavaScript 28 Form

속성

댓글 없음:

댓글 쓰기