[JSP&Servlet] Text Box 에 입력된 값 얻어오기 <select> 요소 자동 입력값 null 처리

🤷‍♂️  "아니 왜 null 로 왔어 ?"

 

---

💫 진행순서

 

1. JSP 코드로 회원가입 폼을 아래와 같이 작성한다.

    <label class="label_s" for="email">이메일</label>
    <input type="text" id="email1" name="email1" required> @
    <input type="text" id="email2" name="email2" required>

---

2. JavaScript 코드로 <select> 요소에서 옵션을 선택할 때 선택된 값이 <input> 박스에 자동으로 입력되도록 한다.

function updateEmailInput() {
  const selectElement = document.getElementById("select-email");
  const inputElement = document.getElementById("email2");

  // 선택된 옵션의 값 가져오기
  const selectedValue = selectElement.value;
.
.
  } else {
    // 선택된 값으로 input 값을 설정
    inputElement.value = selectedValue;
.
.
  }
}

---

3. Servlet doget 메서드로 요청해 입력된 값들을 가져온다.

		String email1 = request.getParameter("email1"); // 이메일 앞자리
		String email2 = request.getParameter("email2"); // 이메일 뒷자리
        .
        .

---

💥 문제 발생

 <select> 요소에서 옵션을 선택해 <input> 박스에 자동 입력을 확인하고 데이터를 전송했더니

이메일 주소 @null 값 으로 입력된 것을 확인할 수 있었다.

---

---

기존 작성 코드 ( JSP, Servlet )

    <label class="label_s" for="email">이메일</label>
    <input type="text" id="email1" name="email1" required> @
    <input type="text" id="email2" name="email2" required>
    <select id="select-email" name="select-email" onchange="updateEmailInput()">
      <option value="">직접입력</option>
      <option value="daum.net">daum.net</option>
		.
        .
        .
    </select>

String email1 = request.getParameter("email1"); // 이메일 앞자리
String email2 = request.getParameter("email2"); // 이메일 뒷자리
out.println("<br>이메일 : " + email1 + "@" + email2);

 

<select> 요소에 입력 된 값이 JavaScript 코드로 인해 <input>박스에 자동으로 입력되었기 때문에

박스의 입력값이 그대로 전송될 것이라고 생각했던 것이다. ^^..

💡 코드 수정1 (Servlet)

String emailList = request.getParameter("select-email");
.
.
if(email2 == null) {
    out.println("<br>이메일 : " + email1 + "@" + emailList);
} else {
    out.println("<br>이메일 : " + email1 + "@" + email2);
}

 

<select> 요소 항목들을 받아올 변수를 선언해 if 문으로 <input> 박스의 입력값을 'null' 체크하는 코드 수정하였다. 

사용자 입장에서는 <select>  요소 선택으로 자동 입력되었지만 보여지기 뿐 실제로는 null 값이었던 것..!

💡 코드 수정2 (Servlet)

if(request.getParameter("email2").trim() == "") {
    email1 += "@" + request.getParameter("emailList");
} else {
    email1 += "@" + request.getParameter("email2");
}

 

.trim() 으로 입력값의 앞뒤 공백을 제거해 값이 빈 문자열인지 확인하는 방법도 있겠다.

 

 

 

"잘가 null.."