선택박스 외 직접입력 시의 처리

카테고리 중 선택 가능한 항목 외 직접입력 시, 해당 입력값 추가 처리해봤다.

제출 form, Mapper에는 변동 없다.

html
직접입력란은 상시 표시되지 않고 '직접입력' 선택 시에만 나타난다.

	<tr>	
		<th>category</th>
		<td>		
			<select name="category"  id="categorySelect" class="selectCtgr" required onchange="handleCategoryChange()">                 
                 <option value="키링">키링</option>
                 <option value="와펜">와펜</option>
                 <option value="인형">인형</option>
                 <option value="포카">포카</option>
                 <option value="브로치핀">브로치핀</option>
                 <option value="custom">직접입력</option>
             </select>
             <input name="categoryInput" id="categoryInput" style="display:none;" placeholder="직접입력">
		</td>
	</tr>

js

<script>
    function handleCategoryChange() {
        var selectElement = document.getElementById('categorySelect');
        var inputElement = document.getElementById('categoryInput');
        
        if (selectElement.value === 'custom') {
            inputElement.style.display = 'inline';
            inputElement.required = true;
            selectElement.name = '';  // 선택한 값을 폼에서 제거
            inputElement.name = 'category';  // 입력한 값을 폼에 추가
        } else {
            inputElement.style.display = 'none';
            inputElement.required = false;
            selectElement.name = 'category';  // 선택한 값이 폼에 포함
            inputElement.name = 'categoryInput';  // 입력 필드를 폼에서 제외
        }
    }
</script>

Ctrl

	@PostMapping("addPrd")
	public String addPrd(MultipartHttpServletRequest request) throws Exception {
	    ...
	    vo.setPquantity(1);
	    
	    // 카테고리 처리
	    String category = request.getParameter("category");
	    String customCategory = request.getParameter("categoryInput");
	    
	    // customCategory가 있으면 해당 값을 category에 할당
	    if (customCategory != null && !customCategory.isEmpty()) {
	        category = customCategory;
	    }
	    
	    // 최종적으로 category 필드에 값 설정
	    vo.setCategory(category);
	    
	    // db에 추가
	    prdSvc.addPrd(vo);
	    
	    //System.out.println("pdetail received: " + request.getParameter("pdetail"));

	    return "redirect:prdList";
	}