[HTML/Javascript] <form> 과 <button> 태그

<form name="delForm" method="GET" action="./delproc.jsp">
  <input type="hidden" name="id" name="id" value="<%= row.get("userid") %>" />
  <td>
  	<button onclick="del();">삭제</button>
  </td>
</form>

 

<form> 태그 안에 

<button>가 있었다. 

 

<button> 태그 클릭 시 

js - del() 함수를 타는 것도 확인 했다. 

 

function del(id, vin){
	
    var delchk = confirm("삭제하시겠습니까?");
    if( !delchk ){
    	alert("삭제가 취소되었습니다.");
        return false;       
    }else{    
    	$("#delForm").submit();        
    }
}

 

그런데 form 을 날리지도 않았는데 계속 form action이 실행 되었다. 

 

취소가 되어서 return false;를 타도 계속 action 실행이 되어서 

찾아보았더니 

 

<button> 은  타입을 지정해 주지 않은 상태에서 

<form> 태그 안에 있으면 그냥 바로 action 처리를 한다. 

삽질하지 않기 위해서

<button> 태그에는 꼭 type을 명확히 써주도록 하자!!

 

<button type="button" onclick="del();">삭제</button>

 

<button> 태그의 

type속성은 

- button 

- reset 

- submit 

 

 

세가지 이며, 

생략시 디폴트 값으로 submit이 작동 한다고 한다.

이게 <form> 태그 안에 있으니 그냥 submit 처리가 되었던 것