View
미니 프로젝트 첫 번째 게시물에 언급했었던 것처럼 구현할 시간이 삼 일 정도 주어졌기에, 우선 기본적으로 선생님이 주신 예제를 활용하려고 노력했다. 그래서 만들어진 첫 번째 구현 화면!
사실 CRUD 과정을 제외하면, 백 단에서 특별히 처리해 주어야 할 로직은 이메일 합치기 말고는 없었다.
다만 수업 시간에 진행하였던 예제로만 진행하면 SELECT OPTION 을 클릭하였을 때 보여야 하는 이메일 주소가 끝이 없어야 하므로, 이용자에게는 직접 입력할 수 있도록 칸을 주어야 하는 것이 맞다고 생각했다.
우선 INPUT 창을 두 개 준비한다.
<input type="text" name="email1" id="email1" size="10">
@
<input name="email2" type="text" size="10" readonly>
<select name="select_email" onChange="selectEmail(this)">
<option value=" ">선택하세요</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="daum.net">daum.net</option>
<option value="1">직접입력</option>첫 번째 input 창은 name 을 email1로, 두 번째 input 창의 name 은 email2 로 주었다.
백 단에서 memEmail 변수를 생성하여 하나로 합쳐 DTO 에 저장할 예정이다.
여기에서 눈여겨 보아야 할 것은, 내가 두 번째 input 창에 readonly 로 설정해 두었다는 사실이다.
만약 readonly 로 설정해 주지 않을 경우, 셀렉트가 된 이후에도, 선택하세요가 눌린 지점에도 멋대로 텍스트가 작성된다.
그리고 value 를 주목해야 한다.
input 두 번째 창 onChange 에 "selectEmail(this)" 를, 직접 입력 value 에 1 을 주었다.
function selectEmail(ele){
var $ele = $(ele);
var $email2 = $('input[name=email2]');
// '1'인 경우 직접입력
if($ele.val() == "1"){
$email2.attr('readonly', false);
$email2.val('');
} else {
$email2.attr('readonly', true);
$email2.val($ele.val());
}
}우선 이 함수에 들어오는 매개변수의 값을 변수 ele 로 칭했다. (매개변수: 옵션에 지정된 value)
그리고 인풋 email2 를 변수 email2 로 칭했다.
여기에서 ele 이 1일 경우, 즉 옵션에 지정된 value 가 1 일 경우, 그러니까 즉시 입력 상태일 경우
readonly, 읽기만 할 수 있는 기능이 false 로 돌려지며 이메일을 작성할 수 있게 된다.
이때 select option 기능을 이용하면 input 창에 자동적으로 '직접 입력' 도 따라 붙게 되므로, val를 ('')로 해 주어
초기화된 것처럼 보이게 해 준다.
또한 나머지 else 인 경우는 즉시 입력이 아닌 경우이므로, readonly 는 true 상태가 되며 내가 지정한 value 값 그대로 form 에 넘어가게 된다.
사실 이 함수에는 함정이 있는데, 이렇게 되면 "선택하세요" 일 경우에도 넘어가므로 막아 주어야 한다(......)
그리고 이렇게 프론트에서 백으로 value 가 넘어가게 될 경우, email1 과 email2 가 분리해서 왔으므로 합쳐 주는 과정이 필요하다.
String email1=request.getParameter("email1");
String email2=request.getParameter("email2");
String memEmail=email1+"@"+email2;
dto.setMemEmail(memEmail);나는 DB와 DTO 에 email 로 지정된 변수가 memEamil 이었으므로, 해당 과정으로 합쳐 디비로 전송했다.이것으로 이메일 직접 입력은 끝!
