하나의 폼에서 다중(Multi) submit 구현 > 기술자료

하나의 폼 안에 2개 이상의 버튼이 있을 경우, 그리고 이 버튼의 type 이 submit 일 경우,

각기 다른 action을 가진 버튼이 있어도 모조리 submit 된다.

 

이것을 해결하는 방법은 버튼의 type을 button 으로 정의하고, 해당 버튼에 onclick 이벤트를 적용한다.

 

그리고 스크립트를 작성하여 스크립트 내에서 폼의 유효성 검사를 하고 form.submit() 을 마지막에 수행하도록 한다.

 

 

< 예제1 >

 

<script type="text/javascript">

  function mySubmit(index) {

    if (index == 1) {

      document.myForm.action='ok1.html';

    }

    if (index == 2) {

      document.myForm.action='ok2.html';

    }

    document.myForm.submit();

  }

</script>

 

<form name='myForm' method='post'>

  <input type="button" value="버튼1" onclick='mySubmit(1)' />

  <input type="button" value="버튼2" onclick='mySubmit(2)' />

</form>

 

 

< 예제2 >

 

<script type="text/javascript">

  function mySubmit() {

    var element = document.myForm.ok1.value;

    window.open('ok1.html?ok='+element,'','width=50,height=50');

  }

</script>

 

<form name='myForm' method='post' action='ok2.html'>

  <input type='text' name='ok1' />

  <input type='button' value="버튼1" onclick='mySubmit()' />

  <input type='submit' value="버튼2" />

</form>

 

위와 같이 코드를 작성하면, 호출 측에서 submit 버튼을 클릭할 경우, 폼의 기본 전송파일인 ok2.html 로 폼이 submit 된다.

그러나 type이 button으로 설정된 버튼을 선택할 경우에는 ok1 값을 post 방식으로 팝업창 (ok1.html, 50x50)을 띄워 개별적으로 submit 할 수 있다.

 

 

 

참고자료

http://dolbbi.tistory.com/409