form 태그 엔터 제거

최주영·2024년 3월 7일
0

form태그

목록 보기
1/1

✅ 역할

  • html에서 form 태그에서는 action 태그 잘 설정한 후
    onsubmit 속성을 false로 해서 값이 자동으로 넘어가지 않도록 설정
<form class="container" id="productForm" action="${path}/product/productRegist" 
      method="post" enctype="multipart/form-data" onsubmit="return false;"> 
  <!-- action : submit할 경로설정   
		enctype="multipart/form-data : form태그 안에 input type file 값들을 넘겨줌
		onsubmit="return false;" : form태그의 submit(전송)이 자동 혹은 엔터로 넘어가지 않도록 해줌
-->
 	---- 여러가지 입력 창들 -----
  <button type="button" onclick="productRegist()">등록하기</button> 
</form>
  • js에서 버튼에 대한 함수를 만든 후, 조건이 맞을 경우 수동으로 submit 호출해준다
const checkProductRegist = {  // 상품등록할 때, 각 부분마다 정상적으로 처리됬는지 구분하는 객체 (다 true일경우에만 상품등록됨)
	"productImg": false,  
	"productTitle": false,
	"productPlace": false,
	"productPrice": false,
	"productExplan": false,
};

----- 중간 로직들 = 조건에 맞게 입력할 경우 참으로 변함 ------

function productRegist() {  // 상품등록 버튼 클릭됬을 때,
	
	if(checkProductRegist.productTitle && checkProductRegist.productPrice && checkProductRegist.productExplan 
		&& checkProductRegist.productImg){ // 입력한 것들 다 참일 경우
			document.getElementById("productForm").submit(); // 위에서 설정한 form태그의 submit 수동동작
	}else{
			return;
	}
profile
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!

0개의 댓글