form fields-select, input, submit

컴퓨터 프로그래밍/JQuery
form fields-select, input, submit

깝돌이 2020. 5. 29. 13:32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
</style>

<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		
		//1. form에 입력된 값을 다 가지고 action에 연결된 페이지로 이동, 전송하는 함수를 사용합니다. 
		$('#frm').submit(function(event) {
			//alert('submit');실행되는지 확인
		
		//2. id, pass 입력된 값을 각각의 변수에 할당
			//alert창으로 값 확인하고 폼 초기화합니다. 포커스도 맞춥니다. 
			var id = $('#id').val();
			var pass = $('#pass').val();
			alert(id + "," + pass);
			$('#id').val("").focus();
			$('#pass').val("")

			//2. submit 이벤트 작동 안하도록(
			//1) return false;
			//2)event를 인자값으로 주고 아래와 같은 함수르 써줍니다. 
			event.preventDefault();

		//3. checkbox에서 취미를 하나도 선택하지 않으면 alert하고 하나이상 선택하면 alert를 합니다. 
			if ($('input[name="hobby"]:checked').length == 0) {
				//checked속성: checkbox, radio-> select는 아닙니다.: selected 속성 또는 val()을 통해 가져옵니다. 
				alert("하는 선택해야합니다. ")
			} else {
				//each...array
				var arr = $('input[name="hobby"]:checked');
				var str = '';
			/*1) arr.each(function() {
				str+=$(this).val()+" "; 
				});*/

			/*2)$.each(arr, function(index, item) {
					str += item.value + " ";
				}); */
				$.each(arr, function(index) {
					str += arr[index].value + " ";
				});
				alert("당신이 선택한 취미는 " + str);
		}//else
			alert($('select>option:selected').val());
			alert($('#hp').val());
	});//submit
	//4.select폼에서 선택한 번호가 resultView영역에 뿌려지도록합니다. select는 click이 아니라 change입니다. 
	$('#hp').change(function() {
		$('#resultView').html('<font color=red>'+$(this).val()+'</font>');
	})
});
</script>
</head>
<body>
	<form action="09_result.jsp" id="frm">
		ID<input type="text" id="id">
		<p>
			PASSWORD<input type="text" id="pass">
		<p>
		<p>
			<strong>당신의 취미를 고르세요</strong> 
			<input type="checkbox" name="hobby" value="Rading">Reading<br>
			<input type="checkbox" name="hobby" value="Walking">Walking<br> 
			<input type="checkbox" name="hobby" value="ListeningToMusic">ListeningToMusic<br>
			<input type="checkbox" name="hobby" value="Dringking">Dringking<br>
		<hr>
		<select id="hp" multiple="multiple" name="hp">
			<option>010</option>
			<option>011</option>
			<option>017</option>
		</select>
		<p>
			<input type="submit" value="send">
	</form>
	<div id="resultView"></div>
</body>
</html>