html form문장에서 2개의 버튼을 동작하려고 하는데, 자꾸 submit이 실행되는 경우 꼭 봐야할 프로그램 소스코드

이런 방법은 왜 없지? 이런 고민에 빠질때.....

와 이거 찾는데 정말 맨붕와서 찾고 난 후 기록을 남겨둡니다.

그래도 이런 방법을 해결할 수 있도록 사람들이 머리를 맞대고 스스로 찾는다는 것이 너무 좋습니다.

<script src="http//code.jquery.com/jquery-1.11.0.min.js"></script>
 
<script type="text/javascript">
    function cancle() {
        self.close();
    }
    function goSubmit() {
        $("#myForm").submit();
    }
</script>
 
 
<meta charset="UTF-8">
<title>Test</title>
 
 
<form name="myForm" id="myForm" action="insert.do" method="get">
    <input type="text" name="address">
     
    <button onclick="cancle()">취소</button>
    <button onclick="goSubmit()">확인</button>
</form>

     위의 코드에서 취소 버튼, 확인 버튼을 누르든 무조건 submit 되는 현상이 발생하는데, 정말 맨붕에 빠집니다. 엄청 찾아해메이게 되지요.


  이렇게 폼을 사용해서 PHP와 결합해서 프로그램을 많이 작성하는데, button을 input type="button"으로 바꿔서 해결하면 되는 것을 정말 못찾아서 너무 해맸습니다.

form문에서 가장 어려웠던 부분이 바로 이 부분입니다. 여러개의 버튼을 만들어서 뭔가 응용프로그램을 만들고 싶은데, 그것이 안되는 것이 정말 힘든 부분이지요.

이런 문제를 해결할 수 있는 방법은 3가지다.

   1. button 태그를 form 태그 안에서 밖으로 빼놓는다.

   2. button 태그를 input type="button"으로 바꾼다. 요것이 핵심입니다. type="button"....

반드시 해결할 수 있습니다.

<input type="button" onclick="cancle()" value="취소">
<input type="button" onclick="goSubmit()" value="확인">

   3. button 태그 안에 type="button"을 추가한다.

<button type="button" onclick="cancle()">취소</button>
<button type="button" onclick="goSubmit()">확인</button>

이런 방법이 있다면 정말 멋지게 해결할 수 있습니다.

form으로 힘들어지면 이젠 이런 버튼 방식으로 해결합시다~~

더 멋지게 날아봅시다~