웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
DHTML의 시작 - Form 예제 (폼처리 HTML)
2002.05.09 20:49
오랜만에 다시 글을 올리네요.. 폼의 나머지 엘리먼트에 대해서 올려야 하는데 시간이
잘 나질 않는군요. 대신 폼 처리 스크립트를 한번 만들어봤습니다.
get방식으로 넘어오는 데이터를 또 다른 페이지의 자바스크립트로 처리하는 예제지요.
예제를 그럼 보면서 설명을 해보도록 하지요.
아래가 기본 코드입니다. 너무 간단하지요? ^^*
// Get방식으로 넘어온 데이터를 추출하는 스크립트
var HTTP_GET_VARS = new Array(); // get메쏘드로 넘어오는 값을 저장할 배열
get_var=unescape(window.location.search).toLowerCase(); // URL부분에서 ?뒷부분을 소문자로 unescape해서 임시 변수에 할당
get_var=get_var.slice(1); // ?를 제거
get_var=get_var.split("&"); // &를 기준으로 배열로 나눔
for(i=0; i<get_var.length;i++){ // 나눠진 배열을 배열 갯스만큼 다시 변수와 그 값으로 분리
get_elevar=get_var[i].split("="); // = 를 기준으로 왼쪽은 변수, 오른쪽은 그 값
HTTP_GET_VARS[get_elevar[0]]=get_elevar[1]; // 배열에 각각 할당
}
이 스크립트는 폼에서 GET방식으로 넘어오는 데이터를 받는 스크립트에요..
위 스크립트가 들어 있는 파일이름이 form.html이라고 한다면
<form action=form.html method=get>
<input type=hidden name=id value=legend>
<input type=hidden name=mode value=write>
<input type=submit value=전송>
</form>
url로 다음과 같은 형태의 값이 전달되지요.
form.html?id=legend&mode=write
그럼 위의 스크립트는 HTTP_GET_VARS['id'], HTTP_GET_VARS['mode'] 배열에 각각 legend와 write를
할당하게 되지요. 그럼 나머지야 변수를 이용해서 간단히 처리가 가능하겠지요?
벌써 감을 잡으신 분들도 계시리라 생각됩니다. 암튼 이렇게 되면 자바스크립트 만으로 폼처리를
가능하게 할 수 있지요. 용도는 뭐 일회성인 곳에만 사용되겠지만 서버 스크립트와 폼사이에 중간 처리부분에 응용하면 아주 훌륭한 기능을 발휘하게 될 것입니다.
다양한 활용방법은 개인적으로 찾아보시도록 하구요..
위의 방법을 이용한 초간단 계산기 예제를 보여드리고 끝내도록 하지요.
http://neom.org/tip/
ps. 브라우저로 확인확인시 스크립트가 작동하지 않을 때는 웹 계정에 업로드 해서 테스트해보세요.
잘 나질 않는군요. 대신 폼 처리 스크립트를 한번 만들어봤습니다.
get방식으로 넘어오는 데이터를 또 다른 페이지의 자바스크립트로 처리하는 예제지요.
예제를 그럼 보면서 설명을 해보도록 하지요.
아래가 기본 코드입니다. 너무 간단하지요? ^^*
// Get방식으로 넘어온 데이터를 추출하는 스크립트
var HTTP_GET_VARS = new Array(); // get메쏘드로 넘어오는 값을 저장할 배열
get_var=unescape(window.location.search).toLowerCase(); // URL부분에서 ?뒷부분을 소문자로 unescape해서 임시 변수에 할당
get_var=get_var.slice(1); // ?를 제거
get_var=get_var.split("&"); // &를 기준으로 배열로 나눔
for(i=0; i<get_var.length;i++){ // 나눠진 배열을 배열 갯스만큼 다시 변수와 그 값으로 분리
get_elevar=get_var[i].split("="); // = 를 기준으로 왼쪽은 변수, 오른쪽은 그 값
HTTP_GET_VARS[get_elevar[0]]=get_elevar[1]; // 배열에 각각 할당
}
이 스크립트는 폼에서 GET방식으로 넘어오는 데이터를 받는 스크립트에요..
위 스크립트가 들어 있는 파일이름이 form.html이라고 한다면
<form action=form.html method=get>
<input type=hidden name=id value=legend>
<input type=hidden name=mode value=write>
<input type=submit value=전송>
</form>
url로 다음과 같은 형태의 값이 전달되지요.
form.html?id=legend&mode=write
그럼 위의 스크립트는 HTTP_GET_VARS['id'], HTTP_GET_VARS['mode'] 배열에 각각 legend와 write를
할당하게 되지요. 그럼 나머지야 변수를 이용해서 간단히 처리가 가능하겠지요?
벌써 감을 잡으신 분들도 계시리라 생각됩니다. 암튼 이렇게 되면 자바스크립트 만으로 폼처리를
가능하게 할 수 있지요. 용도는 뭐 일회성인 곳에만 사용되겠지만 서버 스크립트와 폼사이에 중간 처리부분에 응용하면 아주 훌륭한 기능을 발휘하게 될 것입니다.
다양한 활용방법은 개인적으로 찾아보시도록 하구요..
위의 방법을 이용한 초간단 계산기 예제를 보여드리고 끝내도록 하지요.
http://neom.org/tip/
ps. 브라우저로 확인확인시 스크립트가 작동하지 않을 때는 웹 계정에 업로드 해서 테스트해보세요.
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자] HTML 홈페이지의 태그 기본구조. [4] | ZipShin | 2002.08.07 |
[Siren]하나도 안귀엽게 -ㅅ-;; 문서 정렬하기 [5] | 세이렌 | 2002.08.01 |
[스타일시트] 페이지 여백 없애기2 ^^ ↓ 아래글을 보충합니다. [8] | ZipShin | 2002.07.31 |
[Siren]페이지 여백 없애기 [8] | 세이렌 | 2002.07.31 |
웹페이지 소스보기. [4] | ZipShin | 2002.07.31 |
[Siren]이미지 주변에 점선 테두리 생기게 하기 ^_^ [6] | 세이렌 | 2002.07.30 |
[Siren]글자(문자,폰트) 링크 커서 제어하기 [8] | 세이렌 | 2002.07.30 |
[Tip]로딩속도 높이는 10가지 방법. [8] | HomeBox™ | 2002.06.28 |
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능 [5] | HomeBox™ | 2002.06.27 |
제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
메타태그(Meta)의 모든것 [11] | ZipShin | 2002.06.20 |
홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
저기에서 이리로 온 글입니다.
[3]
![]() | 이성영 | 2002.05.07 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
드래그하면 바뀌는 마술거울효과 (-_-")v
[16]
![]() | 짱나 | 2002.04.05 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
두 개의 프레임을 동시에 제어하기
[4]
![]() | (づ_-) 위드 | 2002.03.25 |