[thymeleaf] form 태그 아래 submit이 여러 개일 때

 

해당 화면 구성을 위해 주문하기, 장바구니, 찜 이렇게 세개의 submit button이 필요했다. 

 

먼저, submit이 하나만 있을 때는 form 태그에 method와 action을 지정해 주고, 단순하게 button을 추가하면 된다. 

<form role="form" method="post" th:action="@{/order/new}">
	...
    <button type="submit" class="btn btn-primary">주문하기</button>
</form>

 

 

submit이 여러 개일 때는 각 button에 formaction을 지정해주면 된다. 

<form role="form" method="post" th:action="@{/order/new}">
	...
	<button type="submit" class="btn btn-primary">주문하기</button>
	<button type="submit" class="btn btn-outline-primary" th:formaction="@{/shop/add}">장바구니</button>
	<button type="submit" class="btn btn-outline-primary" th:formaction="@{/like/add}">찜</button>
</form>

 

 

 

---

사실 이것 말고도 다른 고민이 있었다. 

세 요청(주문하기, 장바구니, 찜) 모두 member_id, item_id가 필요했다. 

member_id는 Controller에서 @AuthenticationPrincipal을 통해 로그인 유저 정보를 받으면 그만이지만,

form 내부에서 item과 관련된 정보는 사용하지 않았기 때문이다.

 

따라서 form 내부에 옵션을 선택하는 부분을 만들어 해결했다. 

나중에 album의 버전 등을 나누어 한 아이템으로 묶는다면 사용할 수 있도록 할 수 있을 것 같다. 

 

<form role="form" method="post" th:action="@{/order/new}">
	<div class="form-group">
		<label for="item">옵션 선택</label>
		<select name="itemId" id="item" class="form-control">
		<option value="option">옵션 선택</option>
		<option th:each="item : ${item}"
				th:value="${item.id}"
				th:text="${item.name}"
				th:selected="${item}"/>
		</select>
	</div>
	<div class="form-group">
		<label th:for="count">주문 수량</label>
		<input name="count" th:data-suffix="개" th:value="1" th:min="1" th:max="${item.stockQuantity}" type="number" class="form-control" id="count"/>
	</div>
	<button type="submit" class="btn btn-primary">주문하기</button>
	<button type="submit" class="btn btn-outline-primary" th:formaction="@{/shop/add}">장바구니</button>
	<button type="submit" class="btn btn-outline-primary" th:formaction="@{/like/add}">찜</button>
</form>