-
211005_form,table,buttonJQuery 2021. 10. 5. 11:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style type="text/css">
body {
font-family: 'Nanum Pen Script';
font-size: 13pt;
}
table {
border: 1px solid gray;
border-collapse: collapse;
}
th,td {
border: 1px solid gray;
}
th {
width: 100px;
background-color: #ffc;
}
#result{
margin-top: 30px;
width: 400px;
height: 300px;
padding: 10px 10px;
border: 2px groove gray;
}
</style>
<script type="text/javascript">
$(function () {
//핸드폰 4글자 입력시 다음칸으로 마우스커서 이동
$("#hp2").keyup(function() {
if($(this).val().length==4)
$("#hp3").focus()
});
//버튼 클릭시 정보읽어서 출력
$("#btn").click(function() {
//누적시킬 정보값
var s="";
s="이름: "+$("#name").val()+"<br>";
s+="연락처: "+$("#hp1 option:selected").text()+"-"+$("#hp2").val()+
"-"+$("#hp3").val()+"<br>";
s+="성별: "+$("input[name='gender']:checked").val()+"<br>";
//글자색 출력..적용은 result css에서
var fcolor=$("input[name='fcolor']:checked").val();
s+="글자색: "+fcolor+"<br>";
//자격증
var lic="";
$("input[name='lic']:checked").each(function(i, element) {
lic+=$(this).val()+" ";
});
s+="자격증: "+(lic==""?"미보유":lic); //없으면 미보유, 있으면 lic출력
//누적한 s값을 result에 넣고 css값 주기
$("#result").html(s).css("color", fcolor);
});
});
</script>
</head>
<body>
<b>폼태그연습 #1</b>
<table>
<caption>개인정보</caption>
<tr>
<th>이름</th>
<td>
<input type="text" id="name" size="7">
</td>
</tr>
<tr>
<th>연락처</th>
<td>
<select id="hp1">
<option>010</option>
<option>011</option>
<option>017</option>
<option>019</option>
</select>
<b>-</b>
<input type="text" id="hp2" maxlength="4" size="4">
<b>-</b>
<input type="text" id="hp3" maxlength="4" size="4">
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="여자" checked="checked">여자
<input type="radio" name="gender" value="남자">남자
</td>
</tr>
<tr>
<th>자격증</th>
<td>
<input type="checkbox" id="lic" value="운전면허">운전면허
<input type="checkbox" id="lic" value="컴퓨터활용능력1급">컴퓨터활용능력1급
<input type="checkbox" id="lic" value="정보처리기사">정보처리기사
</td>
</tr>
<tr>
<th>글자색</th>
<td>
<input type="radio" name="fcolor" value="blue">blue
<input type="radio" name="fcolor" value="magenta">magenta
<input type="radio" name="fcolor" value="green">green
<input type="radio" name="fcolor" value="orange">orange
<input type="radio" name="fcolor" value="black" checked="checked">black
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" id="btn">출력</button>
</td>
</tr>
</table>
<div id="result"></div>
</body>
</html>
'JQuery' 카테고리의 다른 글
211005_transform,hover,rocate,scale,translate (0) 2021.10.05 211005_form,change,click (0) 2021.10.05 211001_each,append,after (0) 2021.10.01 211001_div,check,radio (0) 2021.10.01 211001_clone,append (0) 2021.10.01