예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test_내이름</title>
<script src = "jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('input[name = title]').focus();
})
function send() {
str = "";
if($('input[name = title]').val() == ""){
alert("제목을 입력하세요");
$('input[name = title]').focus();
return false;
}
str += $('input[name = title]').val() + "\n";
if($('input[name = author]').val() == ""){
alert("저자을 입력하세요");
$('input[name = author]').focus();
return false;
}
str += $('input[name = author]').val() + "\n";
if($('input[name = "publisher"]').val() == ""){
alert("출판사를 입력하세요");
$('input[name = "publisher"]').focus();
return false;
}
str += $('input[name = "publisher"]').val() + "\n";
if($('input[name = "price"]').val() == ""){
alert("가격을 입력하세요");
$('input[name = "price"]').focus();
return false;
}
if(isNaN($('input[name = "price"]').val())){
alert("가격을 숫자로 입력하세요");
$('input[name = "price"]').focus();
return false;
}
str += $('input[name = "price"]').val() + "\n";
if($('input[name = "date"]').val() == ""){
alert("입고일을 선택하세요");
$('input[name = "date"]').focus();
return false;
}
str += $('input[name = "date"]').val() + "\n";
move = "";
if($('input[name = "kind"]:checked').length < 1){
alert("배송비를 선택하세요");
$('input[name = "kind"]').focus();
return false;
}
if($('input[name = "kind"]:checked').each(function(){
move += $(this).val() + " ";
}))
str += move + "\n";
store = "";
if($('input[name = "bookstore"]:checked').length < 1){
alert("구매가능 서점을 선택하세요");
$('input[name = "bookstore"]').focus();
return false;
}
if($('input[name = "bookstore"]:checked').each(function(){
store += $(this).val() + " ";
}))
str += store + "\n";
if($('select[name = "count"]').val() == "선택"){
alert("보유수량을 선택하세요");
$('select[name = "count"]').focus();
return false;
}
str += $('select[name = "count"]').val() + "\n";
alert(str);
}
</script>
</head>
<body>
<h1>도서 정보 입력</h1>
<form name="myform" action="result.jsp" method="post">
<table border=1>
<tr>
<td>제목</td>
<td><input type="text" name="title" autofocus="autofocus"></td>
</tr>
<tr>
<td>저자</td>
<td><input type="text" name="author">
</tr>
<tr>
<td>출판사</td>
<td><input type="text" name="publisher">
</tr>
<tr>
<td>가격</td>
<td><input type="text" name="price">
</tr>
<tr>
<td>입고일</td>
<td><input type="date" name="date">
</tr>
<tr>
<td>배송비</td>
<td>유료 <input type="radio" name="kind" value="유료">
무료 <input type="radio" name="kind" value="무료">
</tr>
<tr>
<td>구입가능 서점</td>
<td>교보문고 <input type="checkbox" name="bookstore" value="kyobo">
알라딘 <input type="checkbox" name="bookstore" value="aladin">
yes24 <input type="checkbox" name="bookstore" value="yes24">
인터파크 <input type="checkbox" name="bookstore" value="interpark">
</tr>
<tr>
<td>보유수량</td>
<td><select name="count" id="count">
<option value="선택">선택
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
</select></td>
</tr>
</table>
<br> <input type="submit" value="전송" onclick="return send()">
<input type="reset" value="취소">
</form>
</body>
</html>
실행결과
초기실행
