728x90
반응형
SMALL
change
input 안의 값에 변화에 따라서 자유롭게 핸들링하자
input 태그에 쓰여진 값을 다른 태그 안에 넣어줄수도 있으며 직접 뽑을수도있다
<!DOCTYPE html>
<html>
<body>
<p id="result"></p>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event){
document.getElementById('result').innerHTML=event.target.value; //input에 넣어지는 값 태그안에 넣기
alert(event.target.value);
});
</script>
</body>
</html>SelectBox 에서 선택된 option의 text 값 또는 value값을 가져오자
<!DOCTYPE html>
<html>
//선택한 selectBox의 value 또는 text 값 가져와보기
<body>
<select id="target">
<option value="">선택하세요.</option>
<option value="1">옵션 1</option>
<option value="2">옵션 2</option>
<option value="3">옵션 3</option>
</select>
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event){
alert("알람: "+event.target.value); // 1, 2, 3
alert(t.options[t.selectedIndex].innerText); //옵션1,옵션2,옵션3
});
</script>
</body>
</html>
click
checkBox가 클릭상태면 1, 아니면 0 이라는 값을 갖도록 하자
<!DOCTYPE html>
<html>
<body>
//체크박스 클릭에 따라서 value 값 지정하기
체크박스<input id="target" type="checkbox" />
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event){
if(event.target.checked==true){
event.target.value=1;
}else{
event.target.value=0;
}
});
</script>
</body>
</html>
submit
form 이용하여 데이터 전송시 전송을 잠시 중단 후 유효성 검사를 진행하자
<!DOCTYPE html>
<html>
<body>
//폼으로 전달할때의 유효성 검증
<form id="target" action="result.html">
<label for="name">name</label><input id="name" type="name"/>
<input type="submit" />
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(event){
if(document.getElementById('name').value.length ===0){
alert("필드 값이 누락되었습니다.");
event.preventDefault();
}
});
</script>
</body>
</html>728x90
반응형
LIST
'Language > 자바스크립트' 카테고리의 다른 글
| List<DTO>list 형태를 만들어서 서버에게 전달하기 (0) | 2022.05.04 |
|---|---|
| 10. JSON.stringify. JSON.parse 사용 방법 (0) | 2021.09.30 |
| 8. 자바스크립트 널 값 확인하기 (0) | 2021.09.08 |
| 7. Select Box의 선택된 option 의 text 또는 value 값 가져오기 (0) | 2021.09.07 |
| 6. CheckBox 에 체크여부 확인 (0) | 2021.09.04 |
