반응형
http://thesecondtime.tistory.com/entry/%EC%97%B0%EA%B4%80-%EB%B0%B0%EC%97%B4%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%8F%BC-%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9D%B4%EB%A6%84id%EA%B3%BC-%EA%B0%92-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0
연관 배열을 사용해서 폼 요소의 이름(id)과 값 저장하기
"유효성 검증을 하기 위해 폼 요소의 이름과 값을 저장하고 싶다면!"
아직은 좀 어렵지만 대충 해석해서 올림!
예제 (JavaScript Cookbook 128)
<html>
<form id="picker" onsubmit="return getVals()">
<label>값 1:</label>
<input type="text" id="first" /><br/>
<label>값 2:</label>
<input type="text" id="second" /><br/>
<label>값 3:</label>
<input type="text" id="third" /><br/>
<label>값 4:</label>
<input type="text" id="four" /><br/>
<input type="submit" value="유효성 검사" />
</form>
<div id="result"></div>
<script>
// 폼 요소와 사용하는 연관 배열
// 폼 요소의 이름(id)과 입력값 구하기
function getVals() {
// 모든 입력 요소들을 변수에 할당
var elems = document.getElementById("picker").elements;
// HTMLFormElement.elements == 폼 요소에 포함된 모든 폼 컨트롤를 리턴?
// 배열에 새 값을 추가 === 객체에 새로운 속성을 추가
// 객체로 만듬! Array가 아닌 Object 임에 주의!
var elemArray = new Object();
// for...in문으로 배열을 탐색!
for (var i= 0; i < elems.length; i++ ) {
// 입력된 값이 "text"라면...
if (elems[i].type == "text") {
// elems[i].value === 각각의 입력 요소에 입력된
// 값을 elemArray[elems[i].id] 에 할당!
elemArray[elems[i].id] = elems[i].value;
}
}
// 실행~
checkVals(elemArray);
return false; //...
}
// 값 확인 함수
function checkVals(elemArray) {
var str = "";
for (var key in elemArray) {
// key값 === input.id // elemArray[key]값 === input에 입력된 값~
str += key + ": " + elemArray[key] + " " + "<br/>";
}
// 결과 뿌림!
document.getElementById("result").innerHTML = str;
}
<result>
반응형
'Web > Javascript_Jquery' 카테고리의 다른 글
| input 이벤트 감지 크로스브라우징 (0) | 2016.11.17 |
|---|---|
| 자바스크립트에서 당장 사용해야 할 5가지의 배열 메소드들 (Array) (0) | 2016.11.14 |
| datepicker 시작일과 종료일 설정시 사용하기 좋은 팁 (0) | 2016.11.09 |
| datepicker 경북대 (0) | 2016.11.09 |
| 이전페이지 비교 intro 페이지 이동 (0) | 2016.09.21 |
댓글