반응형
* 셀렉트박스 값 가져오기.
<form action="test6_result.jsp" name="fr">
<select name="fruits">
<option value="Apple">사과</option>
<option value="Grape">포도</option>
<option value="Banana">바나나</option>
</select>
<input type="button" value="선택값확인" id="btnCheck">
<div id="infoArea"></div>
<hr>
<select name="fruits2">
<option value="">과일을 선택하세요</option>
<option value="Apple">사과</option>
<option value="Strawberry">딸기</option>
<option value="Banana">바나나</option>
</select>
<input type="text" name="selectedFruits" readonly>
<input type="button" value="바나나 구매하기" id="btnBuy">
<hr>
<input type="submit" value="전송">
</form>
window.onload = function() {
// 전송버튼(submit)이벤트 핸들링 => 해당폼의 onsubmit 속성 활용하여 submit 이벤트로 핸들링
document.fr.onsubmit = function() {
// 현재 셀렉트박스 선택항목이 "과일을 선택하세요"일 겨우
// "과일 선택 필수!" 경고창 출력하고 셀렉트 박스에 포커스 요청
// 1. 셀렉트박스 value 속성값이 널스트링("")인지 판별하기
if(document.fr.fruits.value == ""){
alert("과일 선택 필수!!");
document.fr.fruits.focus(); // 이거 페이지가 자꾸 넘어가는데??
**** // submit 이벤트 핸들링 과정에서 submit 동작을 취소하려면 return false를 해야한다!
return false; // 현재 함수 실행 즉시 종료 => submit 동작취소됨
// 만약, submit 동작을 수행하려면 true값을 리턴하거나 return 문 자체 생략
}
// 2. 셀렉트박스내의 option 태그 항목들이 셀렉트박스 객체 내의 options 이름의 배열로 관리되므로
// 배열의 첫번째 인덱스요소에 접근하여 selected 속성값이 true 인지 판별
if(document.fr.fruits.options[0].selected){ // 0번배열에 있는 값이 선택되어있으면 경고창!
alert("과일 선택 필수!");
document.fr.fruits.focus();
return false;
}
}
// 주의!! 셀렉트박스 클릭이벤트 연결시 항목선택없이
// 셀렉트박스 자체를 클릭하기만해도 이벤트가 발생하게 되므로 효율적이지 않다!!! onclick 사용금지
// => 셀렉트박스 항목 선택시에만 이벤트 동작하도록 하려면
// click 이벤트 대신 change 이벤트 처리 => 기존 선택 항목 외의 다른 항목 선택 시 동작
document.fr.fruits2.onchange = function() {
// 만약, 과일을 선택하세요 항목이 선택되어 있을 경우
// 텍스트박스 편집(입력)이 불가능하도록 "읽기전용"으로 설정하고
// 다른 항목이 선택되어 있을 경우 "읽기전용" ㅅ ㅏㅇ태를 "해제"
// => 자바스크립트상에서 해당 속성ㅇ값을 제어하려면 true or false 값을 사용하여 제어
// => 주의! HTML 속성며이 두단어 이상의 조합일 경우
// 자바스크립트에서 접근 시 해당 속성명을 Camel-case 표기법으로 지정해야 한다.!
// 즉, readOnly 형식으로 표기해야 한다.
// ex) xxx.readonly = true가 아니라 xxx.readOnly = true(읽기전용) or false(읽기전용해제)
if(document.fr.fruits2.options[0].selected){
document.fr.selectedFruits.readOnly = true;
document.fr.selectedFruits.style.background = "#CCCC99";
} else {
document.fr.selectedFruits.readOnly = false; // 읽기전용 해제
document.fr.selectedFruits.style.background = "";
}
}
// 바나나 구매하기 버튼 클릭 시 바나나 항목 텍스트를 바나나(품절)로 변경하고
// 해당항목 선택이 불가능하도록 처리(disabled 속성활용)
document.querySelector("#btnBuy").onclick = function() {
document.fr.fruits2.options[3].text = "바나나(품절)"; // value는 option안의 값이고 여기서는 글자를 바꿀거니까 text를 써라.
document.fr.fruits2.options[3].disabled = true;
}
}
반응형
'자바스프링웹공부(2024) > 자바스크립트' 카테고리의 다른 글
2024.08.28.JS - 날짜 (4) | 2024.09.01 |
---|---|
2024.08.27.JS - 카카오우편번호 API 사용하기 (2) | 2024.09.01 |
2024.08.26. JS - 익명함수사용, onload 이벤트, 라디오-체크박스 값출력 (0) | 2024.08.27 |
2024.08.14. JS - event (0) | 2024.08.19 |
2024.08.14. JS - document 객체 : querySelector(), innerText, innerHTML (0) | 2024.08.19 |