컴퓨터 프로그래밍/수업
2020.05.28_2
깝돌이
2020. 5. 28. 15:42
<!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. 새로운 option tag들을 추가하는 코드_1
/* //클릭 할때 마다 추가가 되는 걸 막기위한 방법1
$('#addOptionBtn').on('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
//1.each()함수를 사용하여 배열안의 사람의 이름을 select>option 이라는 자식 태그를 만들어서 붙임... append()를 사용합니다.
var a = $(arr).each(function(index) {
var option='<option value='+arr[index]+'>'+arr[index]+'</option>'
$('#friend').append(option);//html()이거 하면 마지막꺼만 들어감.
})//each
$(this).unbind();
})
//클릭 할때 마다 추가가 되는 걸 막기위한 방법2
$('#addOptionBtn').one('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
//1.each()함수를 사용하여 배열안의 사람의 이름을 select>option 이라는 자식 태그를 만들어서 붙임... append()를 사용합니다.
var a = $(arr).each(function(index) {
var option='<option value='+arr[index]+'>'+arr[index]+'</option>'
$('#friend').append(option);//html()이거 하면 마지막꺼만 들어감.
})//each
}) */
//2.새로운 option tag들을 추가하는 코드_2
$('#addOptionBtn').one('click', function() {
var arr=['하경', '재은', '해경', '은채', '미경', '연희', '소희'];
var a = $(arr).each(function(index, item) {
var option='<option value='+item+'>'+item+'</option>'
$('#friend').append(option);
})//each
})
//3. 생성된 폼을 제거....remove();
$('#deleteOptionBtn').click(function() {
$('#friend>option').remove();
})//each
});
</script>
</head>
<body>
<input type="button" value="옵션 생성" id="addOptionBtn">
<input type="button" value="옵션 삭제" id="deleteOptionBtn">
<select id="friend"></select>
</body>
</html>
select form
http://localhost:8888/JQuery/7_form/05_result.jsp?userId=1&userName=1&userAddr=1
form의 name이 key로 잡힙니다. name=key , value=value-> key=value 쌍으로 서버로 갑니다.
프로그램을 하다보면, 폼에 입력된 값을 작업을 가해서 보내고 싶을때가 있습니다. 폼에 입력된 값을 전송하기 전에 처리하는 것을 해봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>orm으로 전송한 값 서버에서 받아서 처리하기</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(){
$("#memberFrm").submit(function() {
//submit() 자바스크립트에서 onsubmit와 같습니다.
//선택자를 form으로 지정해야합니다.
var id = $('#useId').val();//가장 쉽게 받는 방법
var name = $('input[name=userName]').val();//그다음 쉬운 방법
var addr = $(':text[name=userName]').val();
//alert(id+","+name+","+addr);
//2. confirm창으로 연결한다...확인/취소...return
return confirm(name+"님의 정보를 서버로 전송할까요?");
});
});
</script>
</head>
<body>
<!--
http://localhost:8888/JQuery/7_form/05_result.jsp?userId=1&userName=1&userAddr=1
form의 name이 key로 잡힙니다. name=key , value=value-> key=value 쌍으로 서버로 갑니다.
프로그램을 하다보면, 폼에 입력된 값을 작업을 가해서 보내고 싶을때가 있습니다. 폼에 입력된 값을 전송하기 전에 처리하는 것을 해봅니다. -->
<h2>Form으로 전송한 값 서버에서 받아서 처리하기</h2>
<form action='05_result.jsp' method="get" id="memberFrm">
아이디:<input type="text" name="userId" id="useId"><br><br>
이 름:<input type="text" name="userName" id="userName"><br><br>
주 소:<input type="text" name="userAddr" id="userAddr"><br><br>
<input type="submit" value="DataSend">
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<b>${param.userName} 님의 정보를 출력합니다..</b>
<ul>
<li>아이디 :${param.userId}</li>
<li>주소 :${param.userAddr}</li>
</ul>
</body>
</html>
checkbox
<!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(){
$('#frm').submit(function() {
//1. id, name 폼의 공란을 체크합니다. 공백일때 alert창 띄웁니다. 포커스 맞춥니다. 실행이 안되도록 합니다.
//2. checkbox에 하나이상의 값을 넣도록 합니다. 공백일때 alert창을 띄웁니다.
//3. 하나이상의 값이 입력되면 each()를 사용하여 alert로 출력합니다.
//4. confirm창을 통해서 "3개의 취미를 선택하셨습니다. 전송하시겠습니까?" 전송/미전송
var id="";
var name="";
id = $('#id').val();
name = $('#name').val();
if(id==""){
alert("ID 입력해 주세요.");
$('#id').focus();
return false;
}
if(name==""){
alert("NAME을 입력해 주세요.");
$('#name').focus();
return false;
}
//3번 4번 해결-1
/*
var hobbyArr=$('input[name=hobby]:checked');
//alert(hobbyArr.length);
var text = "";
if(hobbyArr.length==0){
alert("하나이상의 취미를 선택하세요");
return false;
}else{
hobbyArr.each(function(index) {
text+=$(this).val()+" ";
})
alert(text);
return confirm("선택하신 "+text+"를 전송하시겠습니까?");
}
*/
//3번 4번 해결-2
/* var hobbyArr=$('input[name=hobby]:checked');
//alert(hobbyArr.length);
var text = "";
if(hobbyArr.length==0){
alert("하나이상의 취미를 선택하세요");
return false;
}else{
$.each(hobbyArr, function(index, item) {
text+=item.value+" ";
})
alert(text);
return confirm("선택하신 "+text+"를 전송하시겠습니까?");
} */
})
});
</script>
</head>
<body>
<form action = "06_result.jsp" id="frm"">
ID<input type="text" name="id" id="id"><p>
NAME<input type="text" name="name" id="name"><p><p>
<strong>당신의 취미를 고르세요.</strong><p>
<input type="checkbox" name="hobby" value="Walking">Walking<br/>
<input type="checkbox" name="hobby" value="베이비시터">베이비시터<br/>
<input type="checkbox" name="hobby" value="독서">독서<br/>
<input type="checkbox" name="hobby" value="헬스">헬스<br/>
<input type="checkbox" name="hobby" value="코딩">코딩<br/>
<input type="submit" value="SEND">
</form>
</body>
</html>