프로그래밍

하나의 폼에서 다중(Multi) Submit 구현

  
일단 하나의 폼 안에 2개 이상의 버튼이 있을 경우, 그리고 이 버튼의 type이 submit일 경우,
각기 다른 action을 가진 버튼이 있다손 치더라도 모조리 submit 되어버린다.
방법은 간단하다. 버튼의 type을 button으로 정의하고, 해당 버튼에 onClick 이벤트를 걸어준다.
그리고 스크립트를 작성하여 스크립트 내에서 폼의 유효성 검사를 하고 form.submit()을 마지막에 수행하도록 한다.

예제#1(스크립트)
<script>
function mySubmit(index) {
if (index == 1) {
document.myForm.action='page1.html';
}
if (index == 2) {
document.myForm.action='page2.html';
}
document.myForm.submit();
}
</script>

예제#1(호출)
<form name='myForm' method='post'>
<input type='button' onClick='mySubmit(1)'>
<input type='button' onClick='mySubmit(2)'>
</form>

위 처럼 코드를 작성하면 page1, page2로 각각 submit이 가능하다.
약간 응용(?)을 하면 아래와 같은 코드도 가능하다.

예제#2 (스크립트)
<script>
function mySubmit() {
var element = document.myForm.text1.value;
window.open('popup.html?txtval='+element,'','width=50,height=50');
}
</script>

예제#2 (호출)
<form name='myForm' method='post' action='next.html'>
<input type='text' name='text1'>
<input type='button' onClick='mySubmit()'>
<input type='submit'>
</form>

위와 같이 코드를 작성하면, 호출 측에서 submit 버튼을 클릭할 경우, 폼의 기본 전송파일인, next.html로 폼이 submit 된다.
그러나 type이 button으로 설정된 버튼을 선택할 경우에는, text1 값을 post방식으로 팝업창(popup.html, 50x50)을 띄워 개별적으로 submit 할 수 있다.

팔자에도 없는 웹 개발을 시작하게 되니, 별 것들이 다 막힌다.
혹시라도 모르시는 분들을 위해,
그리고 나의 기억력을 위해,
포스팅.

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.